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: '<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匹配第一个状态。
- /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
