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('/', '[email protected]');
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

Answers:

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; 

}); 


}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.