首页 > 代码库 > module.ngdoc

module.ngdoc

2024-08-14 16:49:00   217人阅读

译自Angular‘s module docs

1.模块

大部分的应用都有一个主要的方法来实例化，链接，引导。angular应用没有这个方法，而是用模块声明来替代。

这种方式的优点：

*程序的声明越详细越容易理解

*单元测试不需要加载所有的模块，有助于模块书写

*

*第三方的代码可以打包作为复用的代码

*模块可以以任何顺序加载（由于模块延迟执行的特性）

2.基本示例

 1 <doc:example module=‘myApp‘> 2   <doc:source> 3     <script> 4       // declare a module 5       var myAppModule = angular.module(‘myApp‘, []); 6  7       // configure the module. 8       // in this example we will create a greeting filter 9       myAppModule.filter(‘greet‘, function() {10        return function(name) {11           return ‘Hello, ‘ + name + ‘!‘;12         };13       });14 15     </script>16     <div>17       {{ ‘World‘ | greet }}18     </div>19   </doc:source>20 </doc:example>

3.推荐的模块划分

*服务模块，服务的声明

*管理模块，声明管理相关

*过滤器模块

*依赖于上述模块的应用级模块（包含初始化代码）

这样划分的原因是在测试时，常常需要忽略初始化代码（很难测试）。把它放在单独的模块，可以只用加载相关测试模块。

<doc:example module=‘xmpl‘>  <doc:source>    <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) {          // This is effectively part of the main method initialization code          greeter.localize({            salutation: ‘Bonjour‘          });          user.load(‘World‘);        })      // A Controller for your app      var XmplController = function($scope, greeter, user) {        $scope.greeting = greeter.greet(user.name);      }    </script>    <div ng-controller="XmplController">      {{ greeting }}!    </div>  </doc:source> </doc:example>

4.模块加载和依赖

最简单的模块包含配置块和运行块，在应用的引导流程提供依赖。

（1）配置块：在注册和配置阶段执行。只有供应者和常量能够添加到配置块。这是为了防止在服务被完全配置之前意外的实例化。

（2）运行块：在注入被创建后执行，被用来安装应用。只有实例和常量能够注入运行块。这是为了阻止应用运行期间系统进一步

       配置。

angular.module(‘myModule‘, []).  config(function(injectables) { // provider-injector    // This is an example of config block.    // You can have as many of these as you want.    // You can only inject Providers (not instances)    // into the config blocks.  }).  run(function(injectables) { // instance-injector    // This is an example of a run block.    // You can have as many of these as you want.    // You can only inject instances (not Providers)    // into the run blocks  });

4.1配置块

模块中一些简便的方法相当于配置块

angular.module(‘myModule‘, []).  value(‘a‘, 123).  factory(‘a‘, function() { return 123; }).  directive(‘directiveName‘, ...).  filter(‘filterName‘, ...);// is same asangular.module(‘myModule‘, []).  config(function($provide, $compileProvider, $filterProvider) {    $provide.value(‘a‘, 123);    $provide.factory(‘a‘, function() { return 123; });    $compileProvider.directive(‘directiveName‘, ...);    $filterProvider.register(‘filterName‘, ...);  });

配置块应用的顺序取决于它们注册的顺序，常量例外（常量在所有配置项之前）

4.2运行块

运行块类似主方法，用于安装应用。在所有的服务的配置和注入被创建后执行。换句话说，配置块在运行块之前引入。每个模块只加载一次，即使有多个其它模块依赖它。

4.3异步加载

 

module.ngdoc


联系
我们