使用angularJs和laravel 4的簡單工作流程

Question

我首先說我是angularJs ，我覺得它對Web應用程序的大環境非常有用。

經過一些研究和文檔記錄后我得到了一些問題，首先它讓我對如何將它實現到服務器端語言（在我的情況下基於laravel 4.1的PHP）感到angularJs因為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是異步工作的，所以如果用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;
    };

};