转载

拥抱AngularJS

文中一些地方AngularJS简称ng

简介：

ng诞生于2009年，由Misko Hevery等创建，后被Google收购，为克服HTML在构建应用上的不足而设计。

是一款优秀的前端JS框架，核心特性：MVVM（Model-View-ViewModel）、模块化、双向数据绑定、依赖注入。

官网： https://angularjs.org/

中文网： http://www.apjs.net/

入门：

图灵社区

书籍：

用AngularJS开发下一代Web应用

AngularJS权威教程

源码：

GitHub

https://code.angularjs.org/

API：

AngularJS 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 单元测试用（异常捕获，参考地址）
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);     }     }   }  } })

参考资料：

Halower－博客园
angular-ui-bootstrap

服务（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详解