AngularJS 中的常用特性

Posted 2020-07-10

6、表达式

　  在模板中使用表达式是为了以充分的灵活性在模板、业务逻辑和数据之间建立联系，同时又能避免让业务逻辑渗透到模板中。

1 <div ng-controller="SomeController">
2     <div>{{recompute() / 10}}</div>
3     <ul ng-repeat="thing in things">
4         <li ng-class="{highlight: $index % 4 >= threshold($index)}">
5             {{otherFunction($index)}}
6         </li>
7     </ul>
8 </div>

　　当然，对于第一个表达式，recompute() / 10，应该避免这种把业务逻辑放到模板中的方式，应该清晰地区分视图和控制器之间的职责，这样更便于测试。

　　虽然 Angular 里面的表达式比 javascript 更严格，但是它们对 undefined 和 null 的容错性更好。如果遇到错误，模板只是简单地什么都不显示，而不会抛出一个 NullPointerException 错误，这样你就可以安全地使用未经初始化的模型值，而一旦它们被赋值以后就会立即显示出来。

7、区分 UI 和控制器的职责

　　在应用中控制器有三种职责：

• 为应用中的模型设置初始状态
• 通过 $scope 对象把数据模型和函数暴露给视图（UI模板）
• 监视模型其余部分的变化，并采取相应的动作

　   建议为视图中的每一块功能区域创建一个控制器，这样可以让控制器保持小巧和可管理的状态。

　　更为复杂的时候，你可以创建嵌套的控制器，通过内部的原型继承机制，父控制器对象上的 $scope 会被传递给内部嵌套控制器的 $scope。

1 <div ng-controller="ParentController">
2     <div ng-controller="ChildController">...</div>
3 </div>

　　上面的例子中，ChildController 的 $scope 对象可以访问 ParentController 的 $scope 对象上的所有属性（和函数）。

8、使用 $watch 监控数据模型的变化

　  在 scope 内置的所有函数中，用到最多的可能就是 $watch 函数了，当你的数据模型中的某一部分发生变化时，$watch 可以向你发出通知，监控单个对象的属性，也可以监控需要经过计算的结果，只要能被当作属性访问到，或者可以当作一个 JavaScript 函数被计算出来，就可以被 $watch 函数监控。函数签名为：

　　$watch(watchFn, watchAction, deepWatch)

　　watchFn —— 该参数是一个带有 Angular 表达式或者函数的字符串，返回被监控的数据模型的当前值。它会被执行多次，所以要保证不会产生副作用；

　　watchAction —— 通常以函数的形式，接收到 watchFn 的新旧两个值，以及作用域对象的引用，函数签名为 function(newValue, oldValue, scope)

　　deepWatch —— 如果设置为 true，则回去检查被监控对象的每个属性是否发生了变化，一般监控一个数组或者多个对象时要设置为 true，但由于要变量数组，所以运算负担会比较重。