AngularJS（二）

作用域

通常AngularJS中应用（App）是由若干个视图（View）组合成而成的，而视图（View）又都是HTML元素，并且HTML元素是可以互相嵌套的，另一方面视图都隶属于某个控制器（Controller），进而控制器之间也必然会产生嵌套关系。
每个控制器（Controller）又都对应一个模型（Model）也就是$scope对象，不同层级控制器（Controller）下的$scope便产生了作用域。

1.根作用域
一个AngularJS的应用（App）在启动时会自动创建一个根作用域$rootScope，这个根作用域在整个应用范围（ng-app所在标签以内）都是可以被访问到的。
2.子作用域
通过ng-controller指令可以创建一个子作用域，新建的作用域可以访问其父作用域的数据。

过滤器

在AngularJS中使用过滤器格式化展示数据，在“{{}}”中使用“|”来调用过滤器，使用“:”传递参数。

1.内置过滤器
1、currency将数值格式化为货币格式

<p>单价 = {{price| currency }}</p>

2、date日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、时（H/h）、分（m）、秒（s）、毫秒（.sss），也可以组合到一起使用。

<li>{{now| date:"yyyy-MM-dd HH:mm:ss"}}<li> 

3、filter在给定数组中选择满足条件的一个子集，并返回一个新数组，其条件可以是一个字符串、对象、函数

    <li>{{['html', 'css', 'js']|filter:'s'}}</li>
    将返回['css','js']

4、json将Javascrip对象转成JSON字符串。

<li>{{[ {name: '小红', age: 16},
        {name: '小米', age: 10}
        ]|json}}</li>
//结果为[ { "name": "小红", "age": 16 }, { "name": "小米", "age": 10 } ]

5、limitTo取出字符串或数组的前（正数）几位或后（负数）几位

{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位

6、lowercase将文本转换成小写格式

{{ "TANK is GOOD" | lowercase }}     
 // 结果：tank is good

7、uppercase将文本转换成大写格式

{{ "lower cap string" | uppercase }} 
// 结果：LOWER CAP STRING

8、number数字格式化，可控制小位位数

<li>{{num|number:2}}</li>

9、orderBy对数组进行排序，第2个参数可控制方向，默认为false，升序排列。

<li>{{['html', 'css', 'js']|orderBy: '':true}}</li>
//结果为["js","html","css"]  降序排列
<li>{{[{name: '小红', age: 16},
       {name: '小明', age: 16},
       {name: '小米', age: 10}
       ]|orderBy: 'age': false}}</li>
       //结果为[{"name":"小米","age":10},{"name":"小红","age":16},{"name":"小明","age":16}]

2.自定义过滤器
除了使用AngularJS内建过滤器外，还可以根业务需要自定义过滤器，通过模块对象实例提供的filter方法自定义过滤器。

<div ng-controller="demoController">
    {{content|capitalize}}
</div>
<script src="angular.min.js"></script>
<script>
    var app = angular.module('app',[]);
    app.controller("demoController",["$scope",function($scope){
    $scope.contemt = "my name is itcast";
    }]);
    //自定义过滤器
    app.filter("capitalize",function(){
        return function(input){
            return input[0].toUpperCase()+input.slice(1);
        }
    });
    //结果为My name is itcast
    </script>

依赖注入

AngularJS采用模块化的方式组织代码，将一些通用逻辑封装成一个对象或函数，实现最大程度的复用，这导致了使用者和被使用者之间存在依赖关系。
所谓依赖注入是指在运行时自动查找依赖关系，然后将查找到依赖传递给使用者的一种机制。
常见的AngularJS内置服务有$http、$location、$timeout、$rootScope等
1.推断式注入
没有明确声明依赖，AngularJS会将函数参数名称当成是依赖的名称。

app.controller('demoController',function($http,$rootScope){
    $http({
        url:'example.php',
        method:'get',
        params: { // get 参数
                    name: 'itcast',
                    sex: '男'
                },
    });
});

这种方式会带来一个问题，当代码经过压缩后函数的参数被压缩，这样便会造成依赖无法找到。
2.行内注入
以数组形式明确声明依赖，数组元素都是包含依赖名称的字符串，数组最后一个元素是依赖注入的目标函数。推荐使用这种方式声明依赖

app.controller('demoController',['$http','rootScope',function($http,$rootScope){
    $http({
        url:'example.php',
        method:'POST',
        data:{}
    });
}]);