打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
AngularJS自学之路(二)

模块

使用模块带来的好处
1. 保持全局命名空间的清洁;
2. 编写测试代码更容易,并能保持其清洁,以便更容易找到互相隔离的功能;
3. 易于在不同应用间复用代码;
4. 使应用能够以任意顺序加载代码的各个部分。
AngularJS允许我们使用angular.module()方法来声明模块,这个方法能够接受两个参数,
第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表。

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

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

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

作用域

应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文。$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()的方法来清理这个作用域。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
AngularJS开发指南04:核心概览 | AngularJS中文社区
AngularJS进阶(九)控制器controller之间如何通信
AngularJs路由:ngRoute
为什么我弃用Angular,转向React
AngularJS教程之二 双向数据绑定
AngularJS 数据绑定与 $digest 循环 | 天码营
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服