你的位置:首页 > Java教程

[Java教程]AngularJS 笔记系列(三)模块和作用域


模块:

在 AngularJS 中,将函数代码全部都定义在全局命名空间中绝对不是什么好主意,全局变量污染会使冲突几率变大,调试困难,降低开发效率。上次写计时器的 controller 时,我们把 controller 写在了一个全局命名空间中定义的函数里,这就是反例。在 Angular 中,模块是定义应用的主要方式。模块包含了主要的应用代码。一个应用可以包含多个模块,每一个模块内都包含了定义具体功能的代码。

使用模块的好处有很多:

  • 保持全局命名空间的整洁;
  • 便于测试;
  • 可以复用;
  • 使应用可以以任意顺序加载代码各个部分。

定义模块方法:

angular.module('moduleName',[]);

参数:

1. name (字符串)

模块的名称

2. requires (字符串数组)

Angular 的依赖注入机制,数组元素为当前定义模块所依赖的模块名称。

 


 

作用域:

作用域(scope)是构成 Angular 应用的核心基础。应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文。$scope 是定义应用业务逻辑,控制器方法和视图属性的地方。

作用域是视图和控制器之间的胶水。在应用渲染并呈现给用户之前,视图中的模板会和作用域进行连接,然后应用会对 DOM 进行设置以便将属性变化通知给 AngularJS。这个功能让 XHR请求等 promise 对象的实现变得非常容易。

$scope 是可以嵌套的,在子$scope中我们可以引用父$scope 的属性,就像 JavaScript 一样。这个分层就是,当我们为子级 DOM 元素创建了一个新的作用域时,其实也是为子元素创建了一个新的执行上下文。

作用域提供了监视数据模型变化的能力,我们可以使用 $apply 机制,将数据模型的变化在整个应用范围内进行通知。

$rootScope 是 Angular 中最接近全局作用域的对象。所以不要在它上面附加太多业务逻辑,这跟污染全局作用域是一样的。

$scope 就是一个JavaScript对象,我们可以为它添加或者删除属性,他的所有属性都可以自动被视图访问到。它是视图和控制器之间的胶水,也是视图与 HTML 的桥梁。

<ul>生命周期

<li>创建:在创建控制器或者指令时,AngularJS 会同时用$injector 创建一个新的作用域,并在指令或者控制器运行时将该作用域传递进去。</li>

<li>链接:当 Angular 开始运行时,所有的$scope 对象都会附加或者链接到视图中。所有创建$scope 对象的函数也会将自身附加到视图中。这些作用域将会注册当 Angular 应用上下文变化时需要运行的函数。</li>

<li>更新:事件循环运行在$rootScope上,在每个子作用域中进行脏值检查,发现任意变化,即可执行相应的回调函数。</li>

<li>销毁:当一个$scope 在视图中不再被需要时,他将被销毁。</li>

</ul>