I have a simple SPA application ,just to show some data from the database in Laravel 5 ,and for the front-end I'm using AngularJS . My angular files are all in public folder .
When i go to localhost instead of a list of users I get literally this
{{ user1.name }} , {{ user1.email }}
{{ user1.phone_number }}
Here are my files :
route.php
Route::get('/', 'PageController@index');
Route::group(['prefix' => 'api/v1'], function(){
Route::resource('jokes', 'User1Controller');
});
PageController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User1 ;
use App\Http\Requests;
class PageController extends Controller
{
public function index()
{
return view('index');
}
}
User1Controller.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Response;
use App\User1 ;
class User1Controller extends Controller
{
public function index() {
return response()->json( User1::get() );
}
public function store(Request $request) {
User1::create([
'name' => $request->input('name'),
'email' => $request->input('email'),
'phone_number' => $request->input('phone_number')
]);
return response()->json(['success' => true]);
}
}
User1.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class User1 extends Model
{
protected $fillable = [
'name', 'email', 'phone_number'
];
}
resources/views/index.php
<!DOCTYPE html>
<html lang=eng>
<head>
<meta charset="UTF-8">
<title>Welcome </title>
<!-- CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> <!-- load bootstrap via cdn -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> <!-- load fontawesome -->
<style>
body { padding-top:30px; }
/* form { padding-bottom:20px; }
*/ </style>
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="js/app.js"></script> <!-- load our application -->
<script src="js/controllers/mainCtrl.js"></script> <!-- load our controller -->
<script src="js/services/commentServices.js"></script> <!-- load our service -->
</head>
<body class="container" ng-app="user1App" ng-controller="mainController">
<div class="user1" ng-repeat="user1 in user1s">
<h3> <small>{{ user1.name }} , {{ user1.email }}</small></h3>
<p>{{ user1.phone_number }}</p>
</div>
</body>
</html>
public/js/app.js
angular.module('user1App', [
'controllers',
'services'
]);
angular.module('controllers', []);
angular.module('services', []);
public/js/controllers/mainCtrls.js
var Controller = angular.module('controllers');
Controller.controller('mainController', function($scope, $http, User1, $sce) {
// get all the comments first and bind it to the $scope.user1s object
User1.get()
.success(function(data) {
$scope.user1s = data;
});
});
public/js/services/user1Services.js
var Service = angular.module('services');
Service.factory('User1', function($http) {
return {
get : function() {
return $http.get('api/v1/jokes');
}
};
});
I have seedes the database and on the localhost/api/v1/joke there are some users because i checked it with Postman
