Angular 学习笔记(二)

控制器:

  就像 JavaScript 里的构造函数一般,用来增强作用域(scope),当一个控制器通过 ng-controller 指令来添加到 DOM 中时,

  ng 会调用该控制器的构造函数来生成一个控制器对象,且会创建一个新的子级作用域

注:在这个构造函数中,作用域会作为 $scope 参数注入其中,并允许用户代码访问它

 

使用控制器:

  1、初始化 $scope 对象

// 设置属性 attrName 的值为 value
$scope.attrName = value;

 

  2、为 $scope 对象添加行为(方法)

// 添加方法 func
$scope.func = function([params]) {...}

 

任何对象(或原生类型的变量)被添加到 scope 后都将成为 scope 的属性,作为数据模型供模板/视图调用

任何方法被添加到 scope 后,也能在模板/视图中通过 Angular 表达式或是 Angular 的事件处理器调用

 

注:Angular的模板是一个声明式的视图,它指定信息从模型、控制器变成用户在浏览器上可以看见的视图

 

 千万不要使用控制器的场合:

  1、任何形式的 DOM 场合:控制器只应包含业务逻辑

  2、格式化输入:使用 Angular 表单控件代替

  3、过滤输出:使用 Angular 过滤器代替

  4、在控制器间复用有状态或无状态的代码:使用 Angular 服务代替

  5、管理其它部件的生命周期

注:可通过将那些不属于控制器的逻辑都封装到服务中,然后在控制器中通过依赖注入(DI)调用相关服务来保持控制器的“纯度”

 

实现控制器和 scope 对象的关联:

  1、ngController 指令:创建一个新的 scope

  2、$route 路由服务

 

作用域(scope):

  1、一个存储应用数据模型的对象

  2、为表达式提供一个执行上下文

  3、作用域的层级对应于 DOM 的树结构

  4、作用域可监听表达式的变化并传播事件

补充:

  1、作用域提供了($watch)方法监听数据模型的变化

  2、作用域提供了($apply)方法把不是由 Angular 触发的数据模型的改变引入 Angular 的控制范围

  3、作用域提供了基于原型链继承其父作用域属性的机制

  4、作用域提供了表达式的执行环境,必须在一个拥有这个属性作用域执行才有意义

注:在自定义指令中,处在模板的链接阶段时,指令会设置一个 $watch 函数来监听着作用域中各个表达式

  $watch 允许指令在作用域中的属性变化时收到通知,进而让指令能够根据这个变化对 DOM 重新渲染,更新它改变的属性值

 

  a、控制器 --> 作用域 --> 视图(DOM)

  b、指令 --> 作用域 --> 视图(DOM)

    控制器和指令是相互分离的,而且它们与视图之间也是分离的(耦合度低),可大大提高对应进行测试的工作效率

注:作用域的结构对应 DOM 结构,最顶层和 DOM 树的根节点一样,每个 Angular 应用有且仅有一个 root scope,子作用域可有多个

  作用域对象与指令或控制器等 Angular 元素所在的 DOM 节点相关联 ==》 DOM 节点上可抓取到作用域这个对象

你可能感兴趣的:(Angular 学习笔记(二))