php - 使用 angularJs 和 laravel 4 的简单工作流程

Question

我首先要说我对 angularJs 真的很陌生，我觉得它在 Web 应用程序的大环境中真的很有用。

在一些研究和文档之后，我遇到了一些问题，起初它让我对如何将它实现为服务器端语言感到困惑(在我的例子中，基于 laravel 4.1 的 PHP)因为 angularJs有路由和模板等...所以它是一个适当的框架，甚至可以独立工作。

让我们更好地挖掘我想要到达的地方，以了解使用这 2 个框架的工作流。

---

第一个问题

我在使用 angularJs 的一些资源上看到的是如何很容易地在 json 中显示结果并与 dom 绑定(bind)。我什至看到一些开发人员在第一次加载 dom 时使用 angularJs 打印出结果，而不是在 laravel Controller 上使用单个函数并使用 laravel 处理结果。

我认为它在兼容性方面不是很有用，因为 angular 在 IE 8 及更高版本上工作，如果我同样禁用 javascript，我看不到结果。相反，如果我使用 laravel 4 如何首先处理第一个结果，我将始终看到它!这是我看到的一个例子。

路由 Laravel

// set 2 types of route, the first for get the json results for do handle to Angular
// the second route for display the view
Route::get('users','UserController@getUsers');
Route::get('/','UserController@getIndex);

用户 Controller Laravel

public function getUsers() {

$users = User::all();
return $users; // return all users in json

}

public function getIndex() {

   return View:make('index');

}

AngularJs

module.controller('UserCtrl', function($scope,$http) {

   users: function() {
         return $http.get('/users').then(function(result){
                    return result.data;
                });
   };

});

在 View 上

<div ng-repeat="users in user">{{ user }} </div>

嘿!如果我的页面有 20 个结果查询，我不想执行 20 个路由和 Angular 函数。 我说的对吗？但如果他们确实喜欢，应该是出于某种原因。

---

第二个问题

在我将 angularjs 与 laravel 4.1 一起使用之前我是怎么说的，我有可能使用 angularJs 的路由吗？我的意见是不。因为我用 laravel 4 处理我的路线。

---

第三个问题

在调用 ajax 并将其绑定(bind)到我的模板后显示结果的最佳方式。也许这个问题与我的第一个问题完全相反，因为如果我用那个逻辑设置我的应用程序，我就已经为将来调用 ajax 做好了准备，而无需重写我结果的部分模板。

假设我想对之前的结果进行分页，所以我将调用 ajax 来显示下一个或上一个结果。如果我遵循我看到的逻辑(第一个示例)，我唯一要做的就是将新结果推送到之前的对象 json。

相反，如果我使用 laravel 如何首先处理我的结果(正常返回 View 和 foreach)，在调用 ajax 之后我必须创建单个模板来显示具有相同样式的结果并追加结果。您如何显示结果，哪种方法最好？

---

Answer 1

首先，AngularJs 自己处理前端路由。您的 laravel 服务应该仅用作 RESTful api(如 carlosdubusm 所述)。

如果你不想进行 20 次调用，你可以随时进行 angular.service ，该服务将处理一次调用以获取你需要的所有数据，解析它并提供给 Controller 、指令等。

Angular 是异步工作的，所以如果你用 promise 包装你的代码，它会自己处理数据变化。

我希望这是你想知道的。

//编辑:

promise 示例

$scope.user = {
        name    : '',
        email   : ''
    };

$scope.updateUserInfo = function (response) {
        $scope.user = response;
    };

// users model have rest calls to api using restangular
usersModel.getMyInfo()
.then($scope.updateUserInfo);

服务样本

'use strict';
app.factory('alertService', function ($timeout){
    return new AlertService($timeout);
});

var AlertService = function($timeout) {
    this.queue = [];
    this.alerts = [];

    var AlertService = this;

    this.TYPE_INFO = 0;
    this.TYPE_SUCCESS = 1;
    this.TYPE_ALERT = 2;
    this.TYPE_ERROR = 3;

    this.add = function (msg, type) {
        var alert = new AlertItem(msg, type);
        AlertService.queue.push(alert);
        AlertService.alerts.push(alert);

        $timeout(function (){
            AlertService.closeAlert(alert);
        }, 10000);
    };

    this.closeAlert = function (alert) {
        return AlertService.queue.splice(AlertService.queue.indexOf(alert),1);
    };

    this.getAlerts = function (){
        return AlertService.queue;
    };

    this.getAll = function () {
        return this.alerts;
    };

};

var AlertItem = function(msg, type) {

    var TYPE_CLASS = {
        0: "alert-info",
        1: "alert-success",
        2: "",
        3: "alert-error"
    };

    var type = type;
    var msg = msg;

    this.getType = function() {
        return type;
    };

    this.getClass = function () {
        return TYPE_CLASS[type];
    };

    this.getMsg = function () {
        return msg;
    };

};