AngularJS（四）——模块

来源：互联网发布：js 自定义window对象编辑：程序博客网时间：2024/06/05 11:07

一、什么是模块

大部分应用都有一个主方法用来实例化、组织、启动应用。AngularJS应用没有主方法，而是使

用模块来声明应用应该如何启动。这种方式有以下几个优点：

1、启动过程是声明式的，所以更容易懂。

2、在单元测试是不需要加载全部模块的，因此这种方式有助于写单元测试。

3、可以在特定情况的测试中增加额外的模块，这些模块能更改配置，能帮助进行端对端的测试。

4、易于在不同应用间复用代码

5、模块可以以任何先后或者并行的顺序加载（因为模块的执行本身是延迟的）。

AngularJS允许我们使用 angular.module() 方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。

angular.module('myApp', []);

Hello World举例说明：

html:

<span style="font-size:18px;"><!doctype html><html ng-app="myApp"><head><script src="js/angular-1.3.0.js"></script><script src="mokuai1.js"></script></head><body><div>{{ 'World' | greet }}</div></body></html></span>

js:

<span style="font-size:18px;">var myAppModule = angular.module('myApp', []);// configure the module.// in this example we will create a greeting filtermyAppModule.filter('greet', function() {return function(name) {return 'Hello, ' + name + '!';};});</span>

效果：

二、模块的加载和依赖

一个模块就是一系列配置和代码块的集合，它们是在启动阶段就附加在到应用上的。一个最简单的模块由两类代码块集合组成的：

1. 配置代码块-在提供程序注册和配置阶段执行。只有提供程序和常量可以被注入到配置块中。这是为了防止服务在被配置好之前就被提前初始化。

2. 运行代码块-在注入器被创建后执行，被用来启动应用的。只有实例和常量能被注入到运行块中。这是为了防止在运行后还出现对系统的配置。

模块可以把其他模块列为它的依赖。“依赖某个模块”意味着需要把这个被依赖的模块需要在本块模块之前被加载。换句话说被依赖模块的配置块会在本模块配置块前被执行。运行块也是一样。任何一个模块都只能被加载一次，即使它被多个模块依赖。

三、用途

利用模块可以做什么呢？我们可以用它来实例化控制器、指令、过滤器以及服务，但是利用模块类还可以做更多事情。如下模块配置的API方法：

1.config(configFn)

利用此方法可以做一些注册工作，这些工作需要在模块加载时完成。

2.constant(name, object)

此方法会首先运行，所以你可以用它来声明整个应用范围内的常量，并且让它们在所有配置（config方法）和实例（后面的所有方法，例如controller、service等）方法中可用。

3.controller(name,constructor)

它的基本作用是配置好控制器方便后面使用。

4.directive(name,directiveFactory)

可以使用此方法在应用中创建指令。

5.filter(name,filterFactory)

允许你创建命名的AngularJS过滤器，就像前面章节所讨论的那样。

6.run(initializationFn)

如果你想要在注射器启动之后执行某些操作，而这些操作需要在页面对用户可用之前执行，就可以使用此方法。

7.value(name,object)

允许在整个应用中注射值。

8.factory(name,factoryFn)

如果你有一个类或者对象，需要首先为它提供一些逻辑或者参数，然后才能对它初始化，那么你就可以使用这里的factory接口。factory是一个函数，它负责创建一些特定的值（或者对象）。我们来看一个greeter(打招呼)函数的实例，这个函数需要一条问候语来初始化：

function Greeter(salutation) {

this.greet = function(name) {

return salutation + ' ' + name;

};

}

greeter函数示例如下：

myApp.factory('greeter', function(salut) {

return new Greeter(salut);

});

然后可以这样来调用它：

9.service(name,object)

factory和service之间的不同点在于，factory会直接调用传递给它的函数，然后返回执行的结果；而service将会使用"new"关键字来调用传递给它的构造方法，然后再返回结果。

10.provider(name,providerFn)

provider是这几个方法中最复杂的部分（显然，也是可配置性最好的部分）。provider中既绑定了factory也绑定了service，并且在注入系统准备完毕之前，还可以享受到配置provider函数的好处（也就是config块）。

四、总结

写到现在没什么感觉，还需要结合实例，还有其中有一些陌生的函数，没有关系，看看文档然后总结一下就OK。

0 0