Question

我有一个简单的SPA应用程序，只是为了 Laravel 5中数据库中的某些数据，以及前端我正在使用 AngularJS 。我的角度文件都在公共文件夹中。

当我转到 localhost 而不是用户列表时，我确实知道了这个

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

以下是我的文件：

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

资源/视图/ 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');
    }

  };

});

我看到数据库和localhost / api / v1 /笑话有一些用户，因为我用Postman检查了

Answer 1

要达到预期效果，请使用以下选项

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

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

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

$scope.user1s = data; 

}); 


}

AngularJS不会在Laravel5中显示（解析）与$ http.get一起提供的数据

1 个答案: