4 模块详解

左手的ㄟ右手 2022-05-26 00:28 171阅读 0赞

# 模块详解 #

## 什么是模块？ ##

一个模块是服务、指令、控制器、过滤器和配置信息的集合。

大多数应用程序都有个 main 函数来初始化、连接以及启动整个应用。ng 中虽然没有 main 函数，但它用模块来描述应用将如何启动。这种策略有如下几种优势：

*  整个过程是声明式的，更容易理解
 *  在单元测试中，没有必要加载所有模块，这样有利于单元测试的代码书写
 *  在场景测试中，额外的模块可以被加载进来，进而重写一些配置，这样有助于实现应用的端到端的测试
 *  第三方代码可以很容易被打包成可重用的模块
 *  模块可以用任意顺序或并行顺序加载（得益于模块执行的延迟性）

在angular中，模块可以是对象、方法（如果是数组，数组的最后一个元素必须是方法，前面的元素都是方法按顺序排列的参数名称）。后面讲的模块属性和方法，都属于通过`angular.module()`定义的模块对象。如果模块是方法，是不需要经过`angular.module()`定义的，只需写入依赖数组（就是说依赖数组的元素可以是方法），模块在加载依赖关系的时候直接执行了。

## angular.module函数 ##

语法：`angular.module(name, [requires], [configFn]);`

参数：

*  *name*：字符串类型，代表模块的名称；
 *  *requires*：字符串的数组，代表该模块依赖的其他模块列表，如果不依赖其他模块，用空数组即可；
 *  *configFn*：方法或数组，负责在模块初始化时做一些配置，如果是数组，最后一个元素必须是方法。

该函数既可以创建新的模块，也可以获取已有模块，是创建还是获取，通过参数的个数来区分。

方法`configFn`并不是在执行`angular.module()`的时候立即执行，而是当这个模块被第一次使用时，由注入器调用执行。同时，查看方法`configFn`中的`this`就会发现，这个`this`在浏览器中指向的是`window`，而不是`module`。而且，**方法`configFn`只会执行一次，因此同一个angular模块不会重复配置**。

angular.module()创建、获取、注册angular中的模块

// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块
    var createModule = angular.module("myModule", []);
    
    // 只有一个参数(模块名),代表获取模块
    // 如果模块不存在,angular框架会抛异常
    var getModule = angular.module("myModule");
    
    // true,都是同一个模块
    alert(createModule == getModule);

## angular.Module：模块配置接口 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZpZ2h0aW5nX05vMQ_size_16_color_FFFFFF_t_70_pic_center][]

### 属性 ###

*  requires：表示模块的依赖数组，即angular.module方法的requires参数。
 *  name：模块的名字。
 *  \_invokeQueue、\_configBlocks、\_runBlocks：分别对应invokeQueue、configBlocks、runBlocks。

### 方法 ###

模块的以下方法最后全部会返回模块实例本身，形成执行链。

*  provider(name,providerType);  
    添加一个服务提供商
 *  name：服务名称。
 *  providerType：创建一个服务的实例的构造函数。
 *  factory(name,providerFunction);  
    生成一个服务工厂（隐式创建了一个服务提供商）。
 *  name：服务名称。
 *  providerFunction：创建服务的实例的函数。
 *  service(name,constructor);  
    注册一个服务（隐式创建了一个服务提供商）
 *  name：服务名称。
 *  constructor：一个将被实例化的构造函数。
 *  value(name,object);  
    注册一个变量（隐式创建了一个服务提供商）
 *  name：服务名称。
 *  object：服务实例对象。
 *  constant(name,object);  
    给默认的$provider注册一个常量
 *  name：常量名称。
 *  object：常量值。
 *  animation(name,animationFactory);  
    在$animateProvider中注册一个动画服务。
 *  name：动画名称。
 *  animationFactory：创建动画的工厂函数。
 *  filter(name,filterFactory);  
    在$filterProvider中注册一个过滤器
 *  name：过滤器名称。
 *  filterFactory：创建一个过滤器的实例的工厂函数。
 *  controller(name,constructor);  
    在$controllerProvider中注册一个控制器
 *  name：控制器名称。
 *  constructor：控制器构造函数。
 *  directive(name,directiveFactory);  
    在$compileProvider中注册一个指令
 *  name：指令名称。
 *  directiveFactory：指令构造函数。
 *  config(configFn);  
    使用这个方法来注册需要在模块加载时执行的动作。
 *  configFn：在模块加载时执行这个函数。在服务配置时候较实用。
 *  run(initializationFn);  
    使用这个方法来注册需要在所有模块都注入完成后执行的动作。
 *  initializationFn：在注入创建后执行该函数。在应用程序初始化时很实用。

## 模块加载及依赖 ##

模块是配置代码块和运行代码块的集合，在启动阶段被执行。最简单的模块中包含下面两种代码块：

*  配置代码块 - 在 provider 注册和配置阶段执行（注：provider 是 ng 服务的一种）。只有 provider 和 constant 可以被注入配置代码块。这是为了防止服务在完全配置好之前被意外地初始化。
 *  执行代码块 - 在 injector 被创建后执行，被用来启动整个应用。只有服务的实例对象以及 constant 可以被注入到执行代码块。这是为了防止在应用执行期间系统的更进一步的配置。

angular.module('myModule', []).
    config(function(injectables) {  // provider型注入器
    // 这是配置(config)代码块的范例，你可以有任意多个配置代码块
    // 配置块中你只能注入Provider类（注意：不是由Provider类生成的实例）以及`constant`
    }).
    run(function(injectables) {  // instance型注入器
    // 这是运行(run)代码块的范例，你可以有任意个运行代码块
    // 运行块中你只能注入Provider实例（注意：不是Provider类）
    });

### 配置代码块 ###

有一些快捷方法可供模块调用，效果等同于配置代码块，比如：

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', ...);
    });

配置语句的执行顺序就是根据它们注册的顺序而定的。唯一的例外是 constant 的定义，它会被调整到所有配置块的最前面执行。

### 执行代码块 ###

执行代码块是 ng 中最接近 main 函数的一个东西。执行代码块是应用启动时运行的代码。**它在所有的服务被配置好以及 注入器(injector) 被创建好之后执行**。通常，执行代码块包含的代码都很难进行单元测试，正因为如此，它通常应该被丢在一个单独的模块中，这样我们可以在单元测试时忽略它。

### 模块依赖 ###

模块声明时可以列出它所需要依赖的其它模块。一个模块依赖某模块，意味着这个被依赖的模块需要在模块被加载之前加载完毕。更具体些，假设模块A依赖于模块B，那么模块A的配置代码块的执行，必须发生在模块B的配置代码块之后；模块A的执行代码块亦同理，也在模块B的执行代码块之后被执行。每个模块只能被加载一次，即使有多个别的模块依赖它。

### 异步加载 ###

模块是一种管理 `$injector` 配置的方式，它和将脚本加载到JavaScript虚拟机（VM）没有半毛钱关系。现在已经有很多项目用来在 ng 中处理脚本的动态加载。由于模块在加载期什么都不做，所以它们可以按任何顺序载入到虚拟机中，脚本加载器也可以充分利用这一特性来并行地加载模块和脚本。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZpZ2h0aW5nX05vMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20220526/6ff2bee6d8b54fb58f80337b9a9cb095.png