module.ngdoc

Posted 2020-08-10

译自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 as

angular.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异步加载