使用$watch监控数据模型的变化
当数据模型中的某一部分改变时,$watch函数可以向出通知。我们可以控制单个对象的属性,也可以监控函数。
它的函数签名为
$watch(watchFn,watchAction,deepWatch);
每个参数的详细含义:
watchFn:
该参数是一个带有Angular表达式或者函数的字符串,
watchAction:
这是一个函数或者表达式,当watchFn发生改变时会被调用,如果是函数形式他会接受到watchFn的新旧两个值,以及作用于对象的引用。
其函数签名是function(newValue,oldValue,scope)。
deepWatch:
如果设置为true,这个可选的布尔型参数将会命令Angular去检查被监控对象的每个属性是否发生变化,如果要监数组中的元素,或者对象上的所有属性,
而不是监视一个简单的值,就可以用这个参数。由于Angular会遍历数组或者对象,如果集合比较大,那么远算负担就会比较重。
$watch函数会返回一个函数,当我们不再需要接受变更通知时,可以利用这个返回函数注销监视器。
var dereg=$scope.$watch(……………..);
dereg();
使用过滤器格式化数据
我们可以用过滤器来声明应该如何变换数据格式,然后在显示给用户,只要在模板中使用一个插值变量即可。
使用过滤器语法:
{{expression | filterName : parameter1 :……parameterN}}
这里的表达式可以使任意的Angular表达式,filterName是我们需要使用的过滤器名称,过滤器的多个参数之间使用冒号分隔。
Angular内置了很多过滤器,比如:
{{12.9 | currency }}
上面的代码将会显示如下结果:
$12.9
其他的过滤器还有date,number,uppercase等。
我们也可以同时运用多个过滤器:
{{12.9 | currency | number:0}}
将会显示:
$13
numbe过滤器会把数值作为参数传递给round函数。
我们也可以自己编写过滤器。
1: <!DOCTYPE html>
2: <html ng-app="test">
3: <head lang="en">
4: <meta charset="UTF-8">
5: <title></title>
6: </head>
7: <body>
8: {{12|testFilter}}
9: <script src="angular.min.js"></script>
10: <script>
11: var testModule=angular.module("test",[]);
12: testModule.filter("testFilter",function(){
13: return function(input){
14: return input+"filter";
15: }
16: })
17: </script>
18: </body>
19: </html>
会显示:12filter。
使用路由和$location切换视图
1: var someModule=angular.module("someModule",[....module dependencies......]);
2: someModule.config(function($routeProvider){
3: $routeProvider.
4: when('url',{controller:aController,templateUrl:'/path/to/tempate'}).
5: when('other mappings for your app'})
6: ..........
7: otherwise(.....what to do if nothing else matches.....)
8: });
当浏览器中的URL编成指定的值时,Angular将会加载/path/to/template路径下的模板,然后把这个模板中的根元素关联到aController上
最后一行的otherwise()调用告诉路由没有可匹配的任何东西是跳到哪里。
ng-view 指令可以告诉Angular把视图放在哪儿。