angular学习（十四）——Module

发布时间：2020-12-17 09:35:46 所属栏目：安全来源：网络整理

导读：转载请写明来源地址：http://www.jb51.cc/article/p-tlabinrz-bph.html 什么是Module 你可以把Module当作是个容器，里面包含了controllers,services,filters,directives。为什么使用Module 大多数程序都有一个主方法，其他部分的模块都由这个主方法组织在一

转载请写明来源地址：http://www.52php.cn/article/p-tlabinrz-bph.html

什么是Module

你可以把Module当作是个容器，里面包含了controllers,services,filters,directives。

为什么使用Module

大多数程序都有一个主方法，其他部分的模块都由这个主方法组织在一起。

AngularJS却没有所谓的main方法，而由module明确的声明app应该如何bootstrap。这样做有几个优点：

声明式的程序更容易理解
你可以打包代码后形成重用module
module可以按任意顺序加载，甚至是并行。因为module是延迟执行的。

Module版的helloword

<div ng-app="myApp">来说明app需要从哪个module启动，angular.module('myApp',[])后面的数组可以添加需要依赖的其他module。

<!DOCTYPE html> <html> <head> <meta charset="uft-8"/> <title></title> </head> <script src="script/angular.min.js"></script> <body ng-app="myApp"> <div ng-app="myApp"> <div> {{ 'World' | greet }} </div> </div> </body> <script> // 定义module var myAppModule = angular.module('myApp',[]); // 配置module. // 创建greeting过滤器 myAppModule.filter('greet',function () { return function (name) { return 'Hello,' + name + '!'; }; }); </script> </html>

推荐设置

上面只是一个简单的例子，并不是一个大规模的工程。但实际工作中，最好不要只写一个大模块，而是应该分成不同的小模块，如下：

每个功能一个module
每个可重用的组件作为一个module，特别是directive和filter
一个app级别的module，它依赖于上述模块并且有一些初始化的代码

<!DOCTYPE html> <html> <head> <meta charset="uft-8"/> <title></title> </head> <script src="script/angular.min.js"></script> <body ng-app="xmpl"> <div ng-controller="XmplController"> {{ greeting }} </div> </body> <script> angular.module('xmpl.service',[]) .value('greeter',{ salutation: 'Hello',localize: function(localization) { this.salutation = localization.salutation; },greet: function(name) { return this.salutation + ' ' + name + '!'; } }) .value('user',{ load: function(name) { this.name = name; } }); angular.module('xmpl.directive',[]); angular.module('xmpl.filter',[]); angular.module('xmpl',['xmpl.service','xmpl.directive','xmpl.filter']) .run(function(greeter,user) { //可以看成是做初始化的主方法的一部分 greeter.localize({ salutation: 'Bonjour' }); user.load('World'); }) .controller('XmplController',function($scope,greeter,user) { $scope.greeting = greeter.greet(user.name); }); </script> </html>

Module的加载和依赖

module是配置块和运行块的集合，这些块被用于引导进程中。

简单的说，就是两个块的集合：

配置块在provider的注册和配置阶段执行，只有provider和常量可以注入到配置块。这可以防止在service实例未完全初始化前就使用产生的错误。
运行块在injector创建之后执行，被用于启动app。只有实例和常量可以注入到运行块。这可以放置在app运行阶段进行系统配置

angular.module('myModule',[]).
config(function(injectables) { // provider注入
  // 这是一个配置块
  // 
  // 仅可以注入provider，不能注入实例
}).
run(function(injectables) { // 实例注入
  // 这是一个运行块
  // 
  // 仅可以注入实例不能注入provider
});

配置块

module有一些快捷方法可以等同于module的config块，如下：

angular.module('myModule',[]).
  value('a',123).
  factory('a',function() { return 123; }).
  directive('directiveName',...).
  filter('filterName',...);

// 相当于

angular.module('myModule',[]).
  config(function($provide,$compileProvider,$filterProvider) {
    $provide.value('a',123);
    $provide.factory('a',function() { return 123; });
    $compileProvider.directive('directiveName',...);
    $filterProvider.register('filterName',...);
  });

当启动时，AngularJS先执行常量定义，然后按注册顺序执行所有配置块。

运行块

运行块非常接近主方法，运行块是app的启动代码。运行块执行于所有的service被配置和injector创建之后。运行块中的代码很难进行单元测试，因此运行块常常有单独的模块执行，以便单元测试可以忽略这些代码。

依赖

module可以罗列其他module作为依赖项，依赖一个module意味着被需要的module先加载，这个module后加载。也就是说被需要的模块的配置块先运行，需要其他module的module的配置块后运行。运行块也一样。每个module只加载一次，不管所少module需要它。

异步加载

module是$injector配置管理的一种方式，和加载脚本到vm无关。有专门的项目来加载脚本到vm中。module与加载无关，它们可以按任意顺序加载。脚本加载器可以利用这一点对module进行并行加载。

创建vs检索

angular.module('myModule',[])将会创建一个名为myModule的模块，如果myModule已存在，那么将会重写,就是说重新创建了个新的。angular.module('myModule')只会检索已存在的模块。

var myModule = angular.module('myModule',[]);

// 增加directives和services
myModule.service('myService',...);
myModule.directive('myDirective',...);

// 重新创建了module，之前添加的directives和services没有了
var myModule = angular.module('myModule',[]);

// myOtherModule还未定义，所以会报错
var myModule = angular.module('myOtherModule');

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!