AngularJS应用模块化，作用域与事件

最新推荐文章于 2022-10-10 20:27:10 发布

Arsenal1886thegunner

最新推荐文章于 2022-10-10 20:27:10 发布

阅读量465

点赞数

本文链接：https://blog.csdn.net/qq_40975386/article/details/80247405

版权

模块化

AngularJS框架在window对象下一个全局的angular对象，通过调用angular对象的module（）方法返回一个模块实例，我举例一个具体使用方法

//定义一个无依赖模块
angular.module('appModule',[]);
//定义一个依赖module1、module2的模块
angular.module('appModule',['module1','module2']);

angular.module()方法能够接受3个参数，第一个为模块名称，第二个是一个数组，用于指定该模块依赖的模块名称。如不需要其他模块第二个参数可传递一个空数组。第三个为可选参数，接受一个方法用于对模块进行配置，作用和模块实例的config（）方法相同

angular.module()方法返回一个模块实例对象，通过调用其controller（） directive（） filter（）等方法向模块中添加控制器、指令、过滤器等其他组件

在HTML页面中引用为

<html ng-app="appModule"

appModule为调用angular.module()方法时指定的模块名称

作用域

JavaScript对象是基于key-value键值对的，可以把JavaScript对象作为一个map数据结构使用，而AngularJS作用域本质就是一个普通的JavaScript对象

形式如下：

var obj ={
      name=:'Jane',
      age=30,
      walk:function(){
      console.info("walk");
      }
}

AngularJS作用域对象和普通JavaScript一样都可以在作用域对象中增加属性或者方法，当HTML页面中出现ng-app和ng-controller指令时AngularJS框架会自动创建作用域对象。

AngularJS程序中作用域的主要功能是存放模型数据，在控制器中修改作用域中模型数据或在作用域中新增模型数据，然后在视图中通过AngularJS表达式展示类型数据

每个AngularJS应用至少会有一个名称为$rootScope的作用域。它是AngularJS应用的根作用域。当用ng-app启动AngularJS会自动创建一个跟作用域对象$rootScope，接着使用ng-controller指令实例化控制器对象时，AngularJS框架会自动创建一个子作用域$scope

作用域继承

JavaScript语言遵循ECMAscript规范，ES6之前JavaScript没用类的概念，也不具备面向对象多态的的特性，所以严格来讲JavaScript并不是一门面向对象语言，而是基于对象的语言。

AngularJS作用域对象继承采用构造方法原型链继承。AngularJS作用域构造方法中提供了一个$new()成员方法，用于创造子作用域。AngularJS框架创造子作用域的过程大概如下：

var parent=$rootScope;
var child=parent.$new();

AngularJS中所有作用域对象都是$rootScope作用域的子作用域，在AngularJS控制器中可以嵌套另外一个控制器，例如

<div ng-app>
     <div ng-controller="OuterController">
     <div ng-controller="InnerController">
     </div>
     </div>
</div>

在上面这种情况下，AngularJS框架遍历DOM元素，查找到ng-app指令时启动应用，创造$rootScope作用域。

然后查到第一个ng-controller指令，指向名称OuterController的控制器，并调用$rootScope.$new()方法，以原型继承的方式创建$rootScope作用域的子作用域对象。当OuterController构造方法接收一个名称为$scope的参数时，AngularJS实例化控制器对象时会把$scope1对象注入控制器对象中。

接下来继续遍历，遇到第二个ng-controller时调用$scope1.new()方法，以$scope1为原型创建子作用域

$watch方法监视作用域

$watch()方法可以监视作用域中属性的变化

此时对文本框内容修改count值始终不变。

$watch()方法在对待基本类型和引用类型时会有不同的处理方式，它可以接收两个参数，第一个是需要监视的属性，第二个是在监视属性发生变化时需要回调的方法，实际上他还能接收第三个参数，默认情况下参数值为false。

这时候进行的监视叫做引用监视，也就是说只要监视对象引用没有发生变化，就不算它发生变化。

具体来讲，上面只要items数组的引用没有发生变化，就算items数组中的一些元素属性发生了变化，$watch（）方法也不会执行回调方法。这时，比如说将一个新的数组赋值给items，此时才会认为监视的属性发生了变化，进而调用回调方法。

将$watch()方法第三个变量设置为true，此时进行的监视就叫做全等监视，只要监视的属性发生变化，$watch就会执行相应的回调方法

在angular1.1.4之后，新增加了一个$watchCollection()方法来针对数组进行监视，它的性能介于全等监视和引用监视之间，他不会对数组中每一项的属性进行监视，但是可以对数组的项目增减做出反应

接下来聊一下作用域监视解除

在上面例子中，最初文本框内容发生改变时count会累加，当文本值为2时，调用$watch()返回的方法unbindWatcher()解除了作用域监视，所以再次修改文本框内容时count不再累加

作用域事件路由与广播

AngularJS作用域的另一个优秀特性是他的事件传播机制。一些情况下需要在控制器中对一些事件做出处理。例如Ajax请求完成事件，需要通知控制器处理服务端返回的数据，作用域事件传播机制可以帮我们完成。除此外，需要在控制器直接传递数据时，也可以使用作用域事件机制来完成

AngularJS作用域支持事件从子作用域路由到父作用域中和从父作用域广播到所有子作用域中

首先展示一下用$emit()方法实现事件从子作用域路由到父作用域中，第一个参数为事件名称，后面可以传入一个或者多个参数，这些参数能够被传递到父作用域注册的事件监听器中，使用方法为

$scope.$emit("infoEvent",{name:"Jane",age:23});

消息发送出去后可以在父作用域中调用AngularJS作用域对象的$on()方法，注册一个事件监听器监听子作用域路由的事件，下面展示一个完整的作用域事件路由案例：

单击Emit按钮后，父作用域接收到子作用域路由的消息。

在这个例子中，通过两个嵌套ng-controller实例化两个控制器对象，控制器对象实例化时会创建两个具有父子关系的作用域对象。

接着对emit按钮进行事件绑定，单击时调用postevent方法，在postevent方法中调用子作用域对象的$emit()方法向父作用域路由事件，名称为infoevent，第二个参数为向事件监听器传递的数据这里传递了一个JavaScript对象

在parentcontroller控制器中，调用父作用域的$on方法声明一个事件监听器，监听事件名称为infoevent 第二个参数为事件监听器定义部分，他接受两个参数第一个为事件对象第二个为子作用域传递的数据，在事件监听器中输出一些信息。

Arsenal1886thegunner

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJS应用模块化，作用域与事件

AngularJS框架在window对象下一个全局的angular对象，通过调用angular对象的module（）方法返回一个模块实例，我举例一个具体使用方法//定义一个无依赖模块angular.module('appModule',[]);//定义一个依赖module1、module2的模块angular.module('appModule',['module1','module2'])...
复制链接

扫一扫