zoukankan      html  css  js  c++  java
  • module.ngdoc

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

  • 相关阅读:
    MessageDigest类提供MD5或SHA等加密算法
    23种设计模式之策略设计模式
    n & (n-1)
    ubuntu 常用软件配置
    minicom 没有tx 信号
    usb 驱动
    全局变量的危害
    编写安全代码:小心volatile的原子性误解
    ADB Server Didn’t ACK ,failed to Start Daemon 解决方法
    字长
  • 原文地址:https://www.cnblogs.com/quan-quanquan/p/5897359.html
Copyright © 2011-2022 走看看