AngularJS 1.x 入门实践

[ufologist]

入门资源

• 慕课网视频教程AngularJS实战 chencan
• 《AngularJS权威教程》 @ufologist
• 《精通AngularJS》 @Monine

使用感受

2015/9/23 @ufologist

• 最痛苦的莫过于作用域(scope)了, 有时候真不知道这个数据是从哪个作用域(子作用域基于原型链继承父作用域)上下来的

• 双向数据绑定是把双刃剑, 带来了方便也带来了混乱, 就怕子作用域不小心修改到了父作用域的东西

• scope 中放两种数据共同组成一个界面

  • vm: 界面中的基础数据, 可能是前端写死的数据, 也可能是后端返回的基础数据
  • model: 直接映射界面的数据模型, 一般对应后端返回的数据

  例如: 一个界面中表单的 select 控件, 它需要基础数据来填充选项, 因此会用 vm.keywords 来做初始化数据的绑定. 对于选中的值(需要从 keywords 中选), 就是直接映射到界面的数据模型, 因此会用 model.keyword 绑定用于的选择项, 继而提交给后端.

  $scope.vm = {
      keywords: ['a', 'b', 'c']
  };
  $scope.model = {
      keyword: 'a'
  };

常见问题

• AngularJS: $digest vs $apply

  $apply: all watchers are checked, the entire application starts the $digest loop.
  $digest: starts the $digest cycle for the current scope and its children. You should notice that the parents scopes will not be checked and not be affected.