angularjs学习记录

Angularjs

虽然在公司项目上用到了angularjs，但还有很多不了解的地方。利用台风的放假时间学习了一下AngularJS权威教程，这里简单记录一下概念与要点。

基础

Module 模块

module是按业务划分的模块，属于逻辑上的概念，一个module下可以包含多个sevice,多个controller,自己的router等。

Controller 控制器

controller是与模版页面交流的代码，html可以直接访问#scope上的对象、属性、函数。
一般在controller中不含有复杂的业务逻辑，例如接口调用的代码应该放在service层中。
controller的生命周期短，在刷新或跳转时就会消失，所以需要保持的数据应该放在service中。

Service 服务

一般把接口调用，复杂逻辑代码，持久数据放在service中。
定义service使用factory函数，例：

//在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 过滤器

使用过滤器可以实现页面输出的字典转换，例：

{{ name | uppercase }} //使用内置过滤器uppercase将name转为大写

也可以自定义过滤器，实现业务上的输出转换，例：

angular.module('myApp.filters', [])
    .filter('capitalize', function() {
        return function(input) {    //input是要转换的原始输入
            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

使用状态机组织的路由框架，可以实现在路由的页面中再次跳转的嵌套路由。例：

$stateProvider
    .state('inbox', {
        url: '/inbox/:inboxId',
        template: '
Welcome to your inbox
\
            Show priority\
            
\
            
'
        controller: function($scope, $stateParams) {
                $scope.inboxId = $stateParams.inboxId;
            }
        })
    .state('inbox.priority', {
        url: '/priority',
        template: '
Your priority inbox
'
    });

• /inbox/1匹配第一个状态。
• /inbox/1/priority匹配第二个状态。

异步加载js

如果web项目很大，不希望一开始就把所有的js一次加载，可以在路由中配合使用requirejs实现异步加载。
关键点在于路由中的resolve。resolve方法会在切换页面之前执行并阻塞路由动作，因此利用这个方法来实现异步加载。
例：

$routeProvider.
    when('/phones', {
           templateUrl: 'partials/phone-list.html',
           controller: PhoneListCtrl,
           resolve: function(){
              //这里使用实现加载js的逻辑
              delay: function($q) {
                var delay = $q.defer(),
                load = function(){
                    $.getScript('/js/xxxxx.js',function(){
                      delay.resolve();
                    });
                };
                load();
                return delay.promise;
              }
            }
         })

• 要加载的js可以用requirejs的写法实现模块依赖，让结构更清晰。
  [1]: https://github.com/mgonto/restangular