码迷,mamicode.com
首页 > 其他好文 > 详细

module.ngdoc

时间:2016-09-25 14:37:05      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:

译自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异步加载

 

module.ngdoc

标签:

原文地址:http://www.cnblogs.com/quan-quanquan/p/5897359.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!