AngularJS自学之路(二)——模块和作用域

模块

使用模块带来的好处

1. 保持全局命名空间的清洁;

2. 编写测试代码更容易,并能保持其清洁,以便更容易找到互相隔离的功能;

3. 易于在不同应用间复用代码;

4. 使应用能够以任意顺序加载代码的各个部分。

AngularJS允许我们使用angular.module()方法来声明模块,这个方法能够接受两个参数,

第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表。

//这个方法相当于AngularJS模块的setter方法,是用来定义模块的。
angular.module(‘myApp‘, []);

调用这个方法时如果只传递一个参数,就可以用它来引用模块。例如,可以通过以下代码来

引用myApp模块:

// 这个方法用于获取应用
//这个方法相当于AngularJS模块的getter方法,用来获取对模块的引用。
angular.module(‘myApp‘)

作用域

应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文。$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。

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

作用域是应用状态的基础。基于动态绑定,我们可以依赖视图在修改数据时立刻更新 $scope,也可以依赖 scope在其发生变化时立刻重新渲染视图。

作用域提供了监视数据模型变化的能力。它允许开发者使用其中的apply机制,将数据模型的变化在整个应用范围内进行通知。我们在作用域的上下文中定义和执行表达式,同时它也是将事件通知给另一个控制器和应用其他部分的中介。

视图和$scope的世界

AngularJS启动并生成视图时,会将根ng-app元素同$rootScope进行绑定。rootScope是所有scope对象的最上层。

$scope对象就是一个普通的JavaScript对象,我们可以在其上随意修改或添加属性。

$scope对象在AngularJS中充当数据模型,但与传统的数据模型不一样,scope并不负责处理和操作数据,它只是视图和HTML之间的桥梁,它是视图和控制器之间的胶水。

作用域的基本功能

  1. 提供观察者以监视数据模型的变化;
  2. 可以将数据模型的变化通知给整个应用,甚至是系统外的组件;
  3. 可以进行嵌套,隔离业务功能和数据;
  4. 给表达式提供运算时所需的执行环境。

作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头。可以将作用域理解成视图模型(view model)。

$scope对象的生命周期处理有四个不同阶段。

创建

在创建控制器或指令时,AngularJS会用$injector创建一个新的作用域,并在这个新建的控制器或指令运行时将作用域传递进去。

链接

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

更新

当事件循环运行时,它通常执行在顶层$scope对象上(被称作rootScope),每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化,scope对象就会触发指定的回调函数。

销毁

当一个$scope在视图中不再需要时,这个作用域将会清理和销毁自己。

尽管永远不会需要清理作用域(因为Angular会为你处理),但是知道是谁创建了这个作用域还是有用的,因为你可以使用这个$scope上叫做destory()的方法来清理这个作用域。

时间: 2024-10-02 03:14:05

AngularJS自学之路(二)——模块和作用域的相关文章

AngularJS自学之路(三)——控制器和表达式

控制器 控制器在AngularJS中的作用是增强视图. AngularJS中的控制器是一个函数,用来向视图的作用域中添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在页面上创建一个新的控制器时,AngularJS会生成并传递一个新的$scope给这个控制器.可以在这个控制器里初始化scope.由于AngularJS会负责处理控制器的实例化过程,我们只需编写构造函数即可.下面的例子展示了控制器初始化: function FirstController($scope)

AngularJS自学之路——初识AngularJS和数据绑定

AngularJS 是什么 AngularJS的官方文档是这样介绍它的.完全使用JavaScript编写的客户端技术.同其他历史悠久的Web技术(HTML.CSS和JavaScript)配合使用,使Web应用开发比以往更简单.更快捷. AngularJS主要用于构建单页面Web应用.它通过增加开发人员和常见Web应用开发任务之间的抽象级别,使构建交互式的现代Web应用变得更加简单. AngularJS的开发团队将其描述为一种构建动态Web应用的结构化框架. AngularJS使开发Web应用变得

马士兵_JAVA自学之路(为那些目标模糊的码农们)

转载自:http://blog.csdn.net/anlidengshiwei/article/details/42264301 JAVA自学之路 一:学会选择 为了就业,不少同学参加各种各样的培训. 决心做软件的,大多数人选的是java,或是.net,也有一些选择了手机.嵌入式.游戏.3G.测试等. 那么究竟应该选择什么方向呢? 我的意见是,不要太过相信各种培训机构或是抢手文章的说法(包括我),当你要走向社会的时候,就不要再把自己当成学生,不要把自己的将来交给别人,学会运用自己的眼睛去观察,去

【转】JAVA自学之路

JAVA自学之路 一: 学会选择 为了就业,不少同学参加各种各样的培训. 决心做软件的,大多数人选的是java,或是.net,也有一些选择了手机.嵌入式.游戏.3G.测试等. 那么究竟应该选择什么方向呢? 我的意见是,不要太过相信各种培训机构或是抢手文章的说法(包括我),当你要走向社会的时候,就不要再把自己当成学生,不要把自己的将来交给别人,学会运用自己的眼睛去观察,去了解这个世界吧. 每个培训机构都会宣传自己的好处,并不能说明大的趋势. 一些新闻文章很有可能是枪手写的,不必太过相信.国外背景的

[转载] JAVA自学之路

原文链接http://blog.csdn.net/mengxin846/article/details/2219844 虽然文章有点旧但还是有些启发的,譬如要事第一,好读书不求甚解. JAVA自学之路 一:学会选择 为了就业,不少同学参加各种各样的培训. 决心做软件的,大多数人选的是java,或是.net,也有一些选择了手机.嵌入式.游戏.3G.测试等. 那么究竟应该选择什么方向呢? 我的意见是,不要太过相信各种培训机构或是抢手文章的说法(包括我),当你要走向社会的时候,就不要再把自己当 成学生

马士兵:JAVA自学之路

JAVA自学之路 一:学会选择 为了就业,不少同学参加各种各样的培训.决心做软件的,大多数人选的是java,或是.net,也有一些选择了手机.嵌入式.游戏.3G.测试等. 那么究竟应该选择什么方向呢?我的意见是,不要太过相信各种培训机构或是抢手文章的说法(包括我),当你要走向社会的时候,就不要再把自己当成学生,不要把自己的将来交给别人,学会运用自己的眼睛去观察,去了解这个世界吧. 每个培训机构都会宣传自己的好处,并不能说明大的趋势.一些新闻文章很有可能是枪手写的,不必太过相信.国外背景的教师和课

AngularJS进阶(四十)创建模块、服务

AngularJS进阶(四十)创建模块.服务 学习要点 使用模块构架应用 创建和使用服务 为什么要使用和创建服务与模块? 服务允许你打包可重用的功能,使之能在此应用中使用. 模块允许你打包可重用的功能,使之能跨应用使用. 一.应用程序模块化 先看看一个没有模块化的程序 <!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angluar

我的编程之路(二十) 新的环境、新的开始

被其他项目组借用了三个星期,这周终于要给自己的项目组干活了,之前就听同事说过省厅,这次终于要去了,有点激动哈: 1.挤公交 星期二跟着同事一起去省厅,那个公交呀,真是挤呀,以前还庆幸自己上班不用挤公交呢,唉~~~看来这一个多月都要重复着早上7点20起床,7点50挤半个多小时公交的生活了~~~ 2.同事 还记得刚来公司的时候,强哥就跟我说,zqq(一个女生)就做的很好,对自己要求很高,一直在省厅那边,上次我们项目组聚会,第一次见到本人,也见到不少其他同事,那次还自己把自己灌醉了,幸亏宝强哥把我送了

用angularjs开发下一代web应用(二):angularjs应用骨架(二)

1.浅谈非入侵式JavaScript <div ng-click="doSomething()">...</div>这些指令和原来的事件处理器有以下不同之处: 在所有浏览器中具有相同的行为.Angular将会帮你屏蔽差异性. 不会在全局命名空间中进行操作.你所指定的表达式只能访问元素控制器作用域范围内的函数和数据. 2.列表.表格以及其他迭代型元素         ng-repeat可能是最有用的Angular指令了,它可以根据集合中的项目一次创建一组元素的多份