AngularJS(四)——模块

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

一、什么是模块

大部分应用都有一个主方法用来实例化、组织、启动应用。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 filter
myAppModule.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,宋体; line-height:25px"> 允许在整个应用中注射值。

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);

});

然后可以这样来调用它:

var myGreeter = greeter('Halo');

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

10.provider(name,providerFn)

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


四、总结

写到现在没什么感觉,还需要结合实例,还有其中有一些陌生的函数,没有关系,看看文档然后总结一下就OK。
原文链接:https://www.f2er.com/angularjs/149570.html

猜你在找的Angularjs相关文章