AngularJS不會顯示與$ http.get在Laravel5

交付（分析）數據我有一個簡單的SPA應用，只是送如何從數據庫中Laravel 5一些數據，併爲前端我正在使用AngularJS。我的角度文件都在public文件夾中。

當我去本地主機，而不是用戶的列表，我得到這個字面上

{{ user1.name }} , {{ user1.email }} 
{{ user1.phone_number }}

這裏是我的文件：

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' 
    ]; 
}

資源/視圖/ 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>

公共/ JS/app.js

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

angular.module('controllers', []); 
angular.module('services', []);

公共/ JS /控制器/ 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; 
    }); 
});

公共/ JS /服務/ user1Services.js

var Service = angular.module('services'); 

Service.factory('User1', function($http) { 

    return { 
    get : function() { 
     return $http.get('api/v1/jokes'); 
    } 

    }; 

});

我seedes數據庫，並在本地主機/ API/V1 /笑話也有一些用戶，因爲我與郵差

來源

2016-07-09 moonlight

可以分享console.log（$ scope.user1s）的輸出 –

在控制檯中是否出現錯誤？ –

嗯，我沒有看控制檯，因爲我在Docker容器中運行laravel項目http://www.spiralout.eu/2015/12/dockervel-laravel-development.html，所以我不必跑.... php artisan服務....我只打dpermit。但是，當我運行dgulp手錶我沒有得到任何 – moonlight

檢查的話要達到預期效果，請使用以下選項

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

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

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

$scope.user1s = data; 

}); 


}

來源

2016-07-09 20:31:11

再次感謝你。 – moonlight

AngularJS不會顯示與$ http.get在Laravel5

回答

相關問題