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

Question

我首先说我真的很新,angularJs我觉得它对Web应用程序的大环境非常有用.

经过一些研究和文档记录后,我得到了一些问题,首先它让我对如何将它实现到服务器端语言(在我的情况下基于laravel 4.1的PHP)感到困惑,因为它angularJs有路由和模板等...所以它是一个适当的框架,甚至可以独立工作.

让我们更好地了解我想要到达的地方,以了解这个2框架的工作流程.

---

第一个问题

我如何在一些资源上看到angularJs很容易在json中显示结果并与dom绑定.我甚至看到一些开发人员在第一次加载dom时使用angularJs打印出结果,而不是在laravel控制器上使用单个函数并使用laravel处理结果.

我认为它在兼容性方面不是很有用,因为角度正在工作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);

UserController 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;
                });
   };

});

在视图上

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

嘿! 如果我的页面有20个结果查询,我不想做20个路由和角度函数.我说的是对的吗？但是,如果他们这样做,应该是某种原因.

---

第二 - 问题

在我使用带有laravel 4.1的angularjs之前我怎么说有可能我会使用angularJs的路线？我的观点是否定的.因为我用laravel 4来处理我的路线.

---

第3 - Quenstion

调用后显示结果ajax并将其绑定到模板的最佳方法.也许这个问题可以完全违背我的第一个问题,因为如果我使用该逻辑设置我的应用程序,我已准备好将来调用ajax,而不重写我的结果的部分模板.

假设我想要分页以前的结果,所以我会去打电话ajax显示下一个或上一个结果.如果我遵循我所看到的逻辑(第一个例子),我唯一要做的就是将新结果推送到前一个对象上json.

相反,如果我使用laravel我的结果的第一个处理程序(正常返回视图和foreach),在调用之后ajax我必须创建单个模板以显示具有相同样式的结果并附加结果.你如何显示结果,哪种方法最好？

---

Answer 1

首先，AngularJs 本身处理前端路由。你的 laravel 服务应该仅用作 RESTful api （如 carlosdubusm 提到的）。

如果您不想进行 20 次调用，您始终可以进行 Angular 服务，该服务将处理一次调用以获取您需要的所有数据，解析它并提供给控制器、指令等。

Angular 是异步工作的，因此如果你用 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;
    };

};