AngularJS Day02

AngularJS的组成

模块Module
控制器Controller
表达式

模块Module

• JS代码应避免全局
• AngularJS从1.3开始已经不允许全局控制器
• 利用模块Module封装控制器Controller，一个AngularJS应用中只能有一个模块 (ng-app="")，但一个模块中可以有多个控制器(ngcontroller="")
• 语法：

创建：angular.module(“模块名”,[依赖模块数组])
使用：angular.module(“模块名”)或者在创建时赋给一个变量

• 在页面中将模块名赋给ng-app

控制器Controller

• 在模块中添加控制器，语法：

模块对象.controller(‘控制器名称’,["$scope",function($scope){……}]);
模块对象.controller('控制器名称’,function($scope){……});

• 在页面中为容器元素增加ng-controller属性，值为自定义的控制器名称

作用域Scope

• AngularJS提供2个对象： $scope、$rootScope
• 实际上就是一个普通的Object对象，用于存储数据、方法等，是MVC的实现基础
• $scope对应其所在的控制器作用域，$rootScope近似于全局作用域
• 每个控制器都有一个$scope，而$rootScope只有一个，全局作用域，属于整个app
• $scope会因为代码而产生嵌套，子$scope可以访问父$scope中的数据

事件传播机制

• $scope可以传递事件（向父级emit或子级broadcast）
• 上传（emit）：当事件发生时，不仅当前作用域会响应，还会传递给上级作用域
• 下传（broadcast）：当事件发生时，不仅当前作用域会响应，还会传递给下级作用域

$scope生命周期

• 创建：在创建控制器或指令时自动创建
• 链接：链接到视图上，将会注册$watch函数
• 更新：当监控到数据变化，将会触发指定的回调函数
• 销毁：当$scope链接的视图不再需要时，清理并销毁

表达式Expression

• AngularJS表达式写在双大括号内{{ expression}}
• 通过表达式将数据绑定到 HTML中，实现输出数据，与使用ng-bind指令作用相同。
• AngularJS表达式类似于JavaScript表达式，都可以包含文字、运算符和变量。
• 区别：

• 由$parse服务自动解析，而JS中则由eval函数解析
• 相对于作用域$scope，而不是全局
• 可以写在HTML中，使用{{expression}}
• 容错性：如果找不到则不显示
• 不支持自增、自减、位运算符等
• 不支持条件判断、循环及异常
• 支持过滤器

• 手动解析表达式

• 先将$parse服务注入到控制器中

	angular.module('myApp',[]).controller(‘expController’,
					[“$scope”,“$parse”,function($scope,$parse){…}]);

• 在回调函数中使用$watch监控模型数据

$scope.$watch(‘txt’,function(newValue, oldValue,scope){…});

• 在$watch的回调函数中使用$parse服务解析

var parseFunc=$parse($scope.txt);
$scope.outTxt=parseFunc(scope);

过滤器Filter

• 用于将数据格式化后展现，进行数据的处理操作
• AngularJS内置多个过滤器，并支持自定义过滤器
• 可以用在视图模板(templates)、指令（directives）、控制器(controllers)或者服务
  (services)中
• 在视图模板或指令中使用管道字符“|”添加过滤器
• 在控制器或服务中使用$filter

在视图中使用过滤器

• 单一过滤器：{{表达式 | 过滤器名称}}，如：{{123 | currency}}
• 过滤器参数：{{表达式 | 过滤器名称:参数1:参数2:…}}，如：{{1234 | currency:’￥’ }}
• 多个过滤器：{{表达式 | 过滤器1名称 | 过滤器2名称 | … }}，如：{{234.5678 | number:2 |currency:’￥’ }}

在控制器中使用过滤器

• 在定义控制器时，将指定过滤器注入，名称为：过滤器名+Filter；如：currencyFilter、numberFilter；注
  入的过滤器作为函数使用，函数的第一个参数为要过滤的数据，后面依次为过滤器所需参数，如：$s.num=numberFilter (n,2);
• 当需要注入的过滤器较多时，也可以注入$filter服务，然后使用：$ft(“过滤器名”)(参数列表);形式调用，如：

    app.controller(’NumberCtrl', ['$scope','$filter',
    function($sc,$ft){
    $sc.price=$ft("number")(12.34567,2);
    }]);

过滤器列表

• Angular共内置了9种过滤器，分别是

• 货币currency
• 数字number
• 日期date
• 字符串大小写lowercase和uppercase
• 个数限制limitTo
• JSON格式化json
• 数据筛选filter
• 数据排序orderBy

• date过滤器

• 用于将日期对象格式化为指定格式字符串

预定义格式：shortDate、mediumDate（默认格式）、
longDate、fullDate、shortTime、mediumTime、
short、medium

自定义格式：使用字母y、M、d、h/H、m、s、E等
分别表示年、月、日、时(12/24)、分、秒、星期几，
可以自由组合，不同字母个数可用来限制位数，E必
须为3或4个，3个s表示毫秒；另有Z表示时区，a表示
上下午标识AM、PM

• limitTo过滤器

• 用于截取部分字符串或数组，参数为正数表示截
  取开始部分，负数表示截取结尾部分；当参数超
  出数据长度，则返回原始数据
• 示例

{{‘Hello Itany’ | limitTo:3}} 返回：Hel
{{‘Hello Itany’ | limitTo:-3}} 返回：any
{{[3,5,7] | limitTo:-2}} 返回：[5,7]
{{[3,5,7] | limitTo:-4}} 返回：[3,5,7]

• json过滤器

用于将JSON对象或JavaScript对象转换为JSON格式字符串
示例：
{{ {name:‘jerry’,age:20} | json}} 返回：{ “name”:“jerry”, “age”: 20 }

• filter过滤器

用于对数组中的数据进行筛选过滤，返回新数组，可包含两个参数

• 第一个参数可以是以下类型

1.字符串：包含该字符串的数据，符号!表示不包含
2. 对象：将过滤对象与参数对象的相应属性值进行比较
3. 函数：将过滤数据作为函数参数传递进去，返回true表示可出现在新数组中

• 第二个参数可以是

true：使用angular.equals进行比较
false：字符串比较时不区分大小写，默认值
函数：运行后返回true即可出现在新数组中

• orderBy过滤器

• 用于对数组进行排序
• 第一个参数可以是以下类型

字符串：指定排序的属性名，可在属性名前加符号-表示降序
数组：可指定多个属性名，如果按照第一个属性比较结果相等则按照第二个属性进行比较
函数：根据函数的返回值决定顺序
第二个参数用于控制排序顺序，默认为升序，传
递true则为降序

• 自定义过滤器

在模块中使用filter服务自定义过滤器，语法：

app.filter(“自定义过滤器名”,function(){
	return function(input[,可选参数]){
		}
});

自定义反转字符串过滤器示例：

app.filter("reverse",function(){
	return function(input){
		var arr=input.split("");
		arr.reverse();
		return arr.join("");
	}
});