moonlight moonlight - 4 months ago 7
Javascript Question

AngularJS won't display (parse) data that is delivered with $http.get in Laravel5

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
enter image description here

Answer

To achieve expected result , use below option

angular.module('user1App', []);

angular.module('user1App').controller('mainController', function($scope, $http, User1, $sce) { 

$http.get('api/v1/jokes').success(function(data) { 

$scope.user1s = data; 

}); 


}