AngularJS(四)——模块

前端之家收集整理的这篇文章主要介绍了AngularJS(四)——模块前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、什么是模块@H_502_3@@H_502_3@

@H_502_3@大部分应用都有一个主方法用来实例化、组织、启动应用。AngularJS应用没有主方法,而是使@H_502_3@
@H_502_3@用模块来声明应用应该如何启动。这种方式有以下几个优点:@H_502_3@
@H_502_3@ 1、@H_502_3@启动过程是声明式的,所以更容易懂。@H_502_3@@H_502_3@
@H_502_3@ @H_502_3@2、@H_502_3@在单元测试是不需要加载全部模块的,因此这种方式有助于写单元测试。@H_502_3@@H_502_3@
@H_502_3@ 3、@H_502_3@可以在特定情况的测试中增加额外的模块,这些模块能更改配置,能帮助进行端对端的测试。@H_502_3@@H_502_3@
@H_502_3@ 4、@H_502_3@易于在不同应用间复用代码@H_502_3@
@H_502_3@ 5、@H_502_3@模块可以以任何先后或者并行的顺序加载(因为模块的执行本身是延迟的)。@H_502_3@@H_502_3@
@H_502_3@AngularJS允许我们使用 angular.module() 方法来声明模块,这个方法能够接受两个参数,第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表。@H_502_3@@H_502_3@
@H_502_3@ @H_502_3@angular.module('myApp',[]);@H_502_3@@H_502_3@
Hello World举例说明:@H_502_3@
html:@H_502_3@
<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:@H_502_3@
<span style="font-size:18px;">var myAppModule = angular.module('myApp',[]);
// configure the module.
// in this example we will create a greeting filter
myAppModule.filter('greet',function() {
	return function(name) {
		return 'Hello,' + name + '!';
	};
});</span>
效果:@H_502_3@

@H_502_3@

@H_502_3@

二、模块的加载和依赖@H_502_3@

@H_502_3@一个模块就是一系列配置和代码块的集合,它们是在启动阶段就附加在到应用上的。一个最简单@H_502_3@的模块由两类代码块集合组成的:@H_502_3@@H_502_3@
@H_502_3@1. 配置代码块-在提供程序注册和配置阶段执行。只有提供程序和常量可以被注入到配置块中。这是为了防止服务在被配置好之前就被提前初始化。@H_502_3@@H_502_3@
@H_502_3@2. 运行代码块-在注入器被创建后执行,被用来启动应用的。只有实例和常量能被注入到运行块中。这是为了防止在运行后还出现对系统的配置。@H_502_3@@H_502_3@
@H_502_3@ @H_502_3@模块可以把其他模块列为它的依赖。“依赖某个模块”意味着需要把这个被依赖的模块需要在本@H_502_3@块模块之前被加载。换句话说被依赖模块的配置块会在本模块配置块前被执行。运行块也是一样。任@H_502_3@何一个模块都只能被加载一次,即使它被多个模块依赖。@H_502_3@@H_502_3@
三、用途@H_502_3@

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

1.config(configFn)@H_502_3@

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

2.constant(name,object)@H_502_3@

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

3.controller(name,constructor)@H_502_3@

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

4.directive(name,directiveFactory)@H_502_3@

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

5.filter(name,filterFactory)@H_502_3@

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

6.run(initializationFn)@H_502_3@

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

7.value(name,宋体; line-height:25px"> 允许在整个应用中注射值。@H_502_3@

8.factory(name,factoryFn)@H_502_3@

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

function Greeter(salutation) {@H_502_3@@H_502_3@

@H_502_3@this.greet = function(name) {@H_502_3@@H_502_3@

@H_502_3@ @H_502_3@return salutation + ' ' + name;@H_502_3@@H_502_3@

@H_502_3@};@H_502_3@@H_502_3@

}@H_502_3@@H_502_3@


@H_502_3@

greeter函数示例如下:@H_502_3@

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

return new Greeter(salut);@H_502_3@

});@H_502_3@

然后可以这样来调用它:@H_502_3@

var myGreeter = greeter('Halo');
@H_502_3@

9.service(name,宋体; line-height:25px"> factory和service之间的不同点在于,factory会直接调用传递给它的函数,然后返回执行的结果;而service将会使用"new"关键字来调用传递给它的构造方法,然后再返回结果。@H_502_3@

10.provider(name,providerFn)@H_502_3@

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


@H_502_3@

四、总结

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

猜你在找的Angularjs相关文章