Angularjs四大特性2 Angularjs四大特性2

angularjs前两个特性见：http://www.jianshu.com/p/edbf0a8ac920
一. AngularJS四大特性之三-依赖注入

若某个函数调用时需要其他的对象作为形参，就称此函数依赖于形参
function Driver(car) {
car.strat();
car.run();
car.stop();
}
如何解决依赖关系
1）主动创建

var c1 = new Car(); var d1 = new Driver(c1);
1. 被动注入(Injection)方式
  module.controller("控制器"，function($scope,$inerval));
  angular中的ngController指令在实例化控制器对象时，会根据指令的形参名，创建出控制器所依赖的对象，并注入进来---依赖注入（Dependency Injection）
  注意：
  1. angular在创建控制器对象时，会根据形参列表中的每个形参依赖的对象的名称来创建，故控制器声明函数不能声明angular无法识别的形参名 angular只提供了一种依赖注入方式-根据形参名来注入依赖的对象
  2. 若项目js文件使用了类似yuicompressor等压缩程序，默认会把函数的形参名精简为一个字母的形式，会导致Angular的依赖注入失败-解决办法
  module.controller("控制器名"，[
  
  "$scope", "$interval", "$http", function(a,b,c){}
  
  ]);
  3. 可以被注入的对象 - 所有的service对象都可以被注入
1）$rootScope 在多个控制器间共享数据的服务
2）$interval 提供周期性定时器服务
3）$timeout 提供一次性定时器服务
4）$log 体用五个基本的日志输出服务
5）$http 提供异步HTPP请求（AJAX）的服务

$http({method:"GET",url:""}).then(fun).catch(fun) $http.get("url").then(fn); $http.post("url",data).then(fn);

6）$location

二. ng模块中提供的过滤器

filter:把model中的数据在显示时以某种特定的格式来呈现
lowercase

语法：{{表达式 | lowercase}
uppercase

语法：{{表达式 | uppercase}
number

语法：{{表达式 | number}} {{表达式 | number:小数位数}}
currency

{{表达式 | currency}} {{表达式 | currency:'货币符号'}}
date

{{表达式 | date }} {{表达式 | date | "yyyy-MM-dd"}}

三. 总结ng模块中我们已经用到的内容

directive - 用在DOM元素上

ngApp/ngbind/nginit/ngcontroller/ngmodel/
service - 用在控制器的声明里

$scope/$rootScope/$timerout/$interval/$http/$location
filter - 把model中的数据在显示时以某种特定的格式来呈现

四. 单页应用

单页面应用与多页面应用的区别

五. angularjs提供的模块---ngroute

概念

route: 路由通过某条线路找到目标内容 ngroute 模块的目标：就是根据浏览器中url中的一个特殊的地址标记，查找到该标记所对应的模板页面，并异步加载到ngview

使用步骤

1) 创建唯一完整的HTML页面，其中声明一个容器，ngview指令。引入angular.js angular-routejs 2）创建多个模板页面(习惯上放在一个特别的目录下，如tpl) 3) 创建Module,声明依赖于ng/ng-route两个模板var app = angular.module("module",["ng","ngRoute"]); 4）在Module中配置路由字典app.config(function($routeProvider){$routeProvider.when("/start",{templateUrl:xxx, controller:""//此处声明的控制器可供当前目标页面所有元素使用 }) }) 5）使用浏览器做测试http:IP地址/index.html#/路由地址