文中一些地方AngularJS简称ng
简介：
ng诞生于2009年，由Misko Hevery等创建，后被Google收购，为克服HTML在构建应用上的不足而设计。
是一款优秀的前端JS框架，核心特性：MVVM（Model-View-ViewModel）、模块化、双向数据绑定、依赖注入。
入门：
书籍：
源码：
API：
介绍：
模块介绍：（v1.4.0）
- angular.js ng 核心
- angular-route.js ng 路由（参考地址）
- angular-animate.js ng 动画（参考地址）
- angular-cookies.js ng Cookie（参考地址）
- angular-sanitize.js ng 安全模块（应对XSS）
- angular-messages.js ng 表单验证（参考地址）
- angular-resource.js ng restful数据交互（然并卵，只是封装了一层$http，可以用来请求本地json文件）
- angular-mocks.js ng 单元测试工具类（参考地址）
- angular-loader.js ng http请求loading效果（参考地址）
- angular-scenario.js ng 单元测试用
- angular-touch.js ng gestoures（针对移动端，基于jQuery Mobile的touch事件。不过貌似不太好用）
- angular-aria.js ng 富互联网应用（Accessible Rich Internet Applications，貌似没啥用）
- angular-meesage-format.js ng 编译相关（谨慎使用，该文件只有当闭合编译器的高级选项标识时才会编译）
控制器（controller）：
简单理解为－通过依赖注入的方式，把service、依赖关系以及其他对象串联到一起，然后通过$scope把它们关联到view上。
var app = angular.module('app', []);
app.controller('indexCtrl', ['$scope', 'demoService', function($scope, demoService) {
$scope.name = demoService.getName();
}])
路由控制：
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: 'module/order/list.html',
controller: 'listCtrl'
})
.when('/detail/:orderid', {
templateUrl: 'module/order/detail.html',
controller: 'detailCtrl'
})
.otherwise({redirectTo: '/dashboard'});
}])
指令（directive）：
简单理解为－在特定DOM上运行的函数，指令可以扩展这个DOM的功能。
应用场景：封装通用插件
var app = angular.module('app', []);
app.directive('tree', function($location) {
return {
restrict: 'EA',
replace: true,
scope: {
treeNodes: '='
},
templateUrl: './script/directive/template/treeTmpl.html',
link: function($scope, $element, $attrs) {
$scope.directTo = function(url) {
if(!!url) {
$location.path(url);
}
}
}
}
})
参考资料：
服务（service）：
简单理解为－单例对象
三种构建方式：
factory、service、provider
区分：
factory需要创建一个对象，并return这个对象。比较常用且容易理解。
var app = angular.module('app', []);
app.factory('demoService', function() {
var service = {
getName: function() {
var myName = 'Tom';
return myName;
}
};
return service;
})
service接收一个构造函数，不需要创建一个对象并return。跟factory的方式区别不大，源码里只是加了层封装。
var app = angular.module('app', []);
app.service('demoService', function() {
this.getName: function() {
var myName = 'Tom';
return myName;
}
})
provider是创建service最底层的方法，需要在自带的$get()方法里做逻辑。跟上面两个的区别在于：可以通过config()方法配置创建service。
var app = angular.module('app', []);
app.provider('demoService', function() {
this.$get = function() {
var service = {
getName: function() {
var myName = 'Tom';
return myName;
}
}
return service;
}
})
provider应用场景：
- 当我们需要在应用开始前对service进行配置的时候，eg：我们需要配置services在不同的部署环境里（开发、测试、生产），使用不同的后端接口处理时。
- 当我们打算发布开源时。
参考资料：AngularJS中factory，service，provider的区别
过滤器（filter）：
用于处理数据的格式化（format），eg：日期格式化、数字精度处理、字符串截取、对象排序等。
var app = angular.module('app', []);
app.filter('sortFilter', function() {
return function(type) {
if(type.toUpperCase() == 'ASC') {
return 'DESC';
} else {
return 'ASC';
}
}
})
参考资料：AngularJS filter详解
其他资料：
何时应该使用Directive、Controller、Service？
实战总结：
深入：
总结：
初识ng时，被它的依赖注入所迷惑，又被它的双向数据绑定深深吸引，颠覆了以往用jQuery做项目时的思想。
仅记得做Java项目时，spring框架有一套依赖注入的模式。前端框架中引入依赖注入的思想，不得不佩服ng作者的脑洞。
后端出生的FE，难以抗拒地喜欢上了这个JS框架，虽然它被很多人质疑（学习成本高，太臃肿etc）。
相信会有更多的FE engineer爱上它。
PS：
文中若有不妥之处，请留言or私信告知，不甚感激。