Angularjs

雖然在公司項目上用到了angularjs，但還有很多不了解的地方。利用臺風(fēng)的放假時間學(xué)習(xí)了一下AngularJS權(quán)威教程，這里簡單記錄一下概念與要點。

基礎(chǔ)

Module 模塊

module是按業(yè)務(wù)劃分的模塊，屬于邏輯上的概念，一個module下可以包含多個sevice,多個controller,自己的router等。

Controller 控制器

controller是與模版頁面交流的代碼，html可以直接訪問#scope上的對象、屬性、函數(shù)。
一般在controller中不含有復(fù)雜的業(yè)務(wù)邏輯，例如接口調(diào)用的代碼應(yīng)該放在service層中。
controller的生命周期短，在刷新或跳轉(zhuǎn)時就會消失，所以需要保持的數(shù)據(jù)應(yīng)該放在service中。

Service 服務(wù)

一般把接口調(diào)用，復(fù)雜邏輯代碼，持久數(shù)據(jù)放在service中。
定義service使用factory函數(shù)，例：

//在myApp模塊中定義UserService
angular.module('myApp', [])
    .factory('UserService', function(){
        var userInfo;
        return {
            getUserInfo : funciton(){
                return userInfo;
            }
        };
    })

controller可以通過依賴注入的方式使用service，例：

//UserService是通過注入進來
.controller('ServiceController', funciton($scope, UserService){
    $scope.doSomething = function(){
        return UserService.getUserInfo();
    };
})

filter 過濾器

使用過濾器可以實現(xiàn)頁面輸出的字典轉(zhuǎn)換，例：

{{ name | uppercase }} //使用內(nèi)置過濾器uppercase將name轉(zhuǎn)為大寫

也可以自定義過濾器，實現(xiàn)業(yè)務(wù)上的輸出轉(zhuǎn)換，例：

angular.module('myApp.filters', [])
    .filter('capitalize', function() {
        return function(input) {    //input是要轉(zhuǎn)換的原始輸入
            return '';               //返回過濾后的輸出
        };
    });

擴展

Restangular 替代$http和$resource

比原生好用的restful接口訪問庫，[mgonto/restangular][1]，一些例子：

// GET to http://www.google.com/1 You set the URL in this case
Restangular.oneUrl('googlers', 'http://www.google.com/1').get();
// GET /accounts/123/messages
Restangular.one("accounts", 123).customGET("messages")
// GET /accounts/messages?param=param2
Restangular.all("accounts").customGET("messages", {param: "param2"})
// POST /accounts/123/messages?param=myParam with the body of name: "My Message"
account.customPOST({name: "My Message"}, "messages", {param: "myParam"}, {})

ui-router 替代ng-router

使用狀態(tài)機組織的路由框架，可以實現(xiàn)在路由的頁面中再次跳轉(zhuǎn)的嵌套路由。例：

$stateProvider
    .state('inbox', {
        url: '/inbox/:inboxId',
        template: '<div><h1>Welcome to your inbox</h1>\
            <a ui-sref="inbox.priority">Show priority</a>\
            <div ui-view></div>\
            </div>'
        controller: function($scope, $stateParams) {
                $scope.inboxId = $stateParams.inboxId;
            }
        })
    .state('inbox.priority', {
        url: '/priority',
        template: '<h2>Your priority inbox</h2>'
    });

• /inbox/1匹配第一個狀態(tài)。
• /inbox/1/priority匹配第二個狀態(tài)。

異步加載js

如果web項目很大，不希望一開始就把所有的js一次加載，可以在路由中配合使用requirejs實現(xiàn)異步加載。
關(guān)鍵點在于路由中的resolve。resolve方法會在切換頁面之前執(zhí)行并阻塞路由動作，因此利用這個方法來實現(xiàn)異步加載。
例：

$routeProvider.
    when('/phones', {
           templateUrl: 'partials/phone-list.html',
           controller: PhoneListCtrl,
           resolve: function(){
              //這里使用實現(xiàn)加載js的邏輯
              delay: function($q) {
                var delay = $q.defer(),
                load = function(){
                    $.getScript('/js/xxxxx.js',function(){
                      delay.resolve();
                    });
                };
                load();
                return delay.promise;
              }
            }
         })

• 要加載的js可以用requirejs的寫法實現(xiàn)模塊依賴，讓結(jié)構(gòu)更清晰。
  [1]: https://github.com/mgonto/restangular