Angularjs四大特性2

angularjs前两个特性见：http://www.jianshu.com/p/edbf0a8ac920

一. AngularJS四大特性之三-依赖注入

1. 若某个函数调用时需要其他的对象作为形参，就称此函数依赖于形参

   function Driver(car) {
   car.strat();
   car.run();
   car.stop();
   }

2. 如何解决依赖关系

   1）主动创建

    var c1 = new Car();
    var d1 = new Driver(c1);
   

   2. 被动注入(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模块中提供的过滤器

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

2. lowercase

     语法：{{表达式 | lowercase}
   

3. uppercase

    语法：{{表达式 | uppercase}
   

4. number

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

5. currency

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

6. date

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

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

1. directive - 用在DOM元素上

   ngApp/ngbind/nginit/ngcontroller/ngmodel/
   

2. service - 用在控制器的声明里

    $scope/$rootScope/$timerout/$interval/$http/$location
   

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

四. 单页应用

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

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

1. 概念

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

2. 使用步骤

 1) 创建唯一完整的HTML页面，其中声明一个容器，ngview指令。引入angular.js angular-routejs

     <div ng-view></div>

 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#/路由地址

3. ngroute中的页面跳转

   通过超链接访问 href="#/main"
   通过js跳转 $location.path("/2")

补充：

AngularJS的最大的不足/应用时需要特别关注的地方

原生ES/JS/DOM只有特定HTML元素的特定事件的监听机制，没有监听数据的机制

$interval和window.setInterval()的区别

$interval修改任何的模型Model数据，底层会立即遍历一遍$digest队列

即使修改了Model数据，也不会遍历$diges