AngularJS 中的常用特性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS 中的常用特性相关的知识,希望对你有一定的参考价值。

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,但由于要变量数组,所以运算负担会比较重。

 

以上是关于AngularJS 中的常用特性的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS 中的常用特性

AngularJS 中的常用特性

AngularJS 的常用特性

AngularJS 常用模块书写建议

angularjs常用指令

AngularJs学习笔记4——四大特性之双向数据绑定