AngularJS Module方法详解
AngularJS是什么？
AngularJs（后面就简称ng了）是一个用于设计动态web应用的结构框架。首先，它是一个框架，不是类库，是像EXT一样提供一整套方案用于设计web应用。它不仅仅是一个javascript框架，因为它的核心其实是对HTML标签的增强。
何为HTML标签增强？其实就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属性等，这些HTML原生没有的标签/属性在ng中有一个名字：指令（directive）。后面会详细介绍。那么，什么又是动态web应用呢？与传统web系统相区别，web应用能为用户提供丰富的操作，能够随用户操作不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用，即数据操作比较多的应用，而非是游戏或图像处理类应用。
为了实现这些，ng引入了一些非常棒的特性，包括模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定，能够让我们摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上。
另外一个疑问，ng是MVC框架吗？还是MVVM框架？官网有提到ng的设计采用了MVC的基本思想，而又不完全是MVC，因为在书写代码时我们确实是在用ng-controller这个指令(起码从名字上看，是MVC吧)，但这个controller处理的业务基本上都是与view进行交互，这么看来又很接近MVVM。让我们把目光移到官网那个非醒目的title上：“AngularJS — Superheroic JavaScript MVW Framework”。
AngularJS中的Module类负责定义应用如何启动，它还可以通过声明的方式定义应用中的各个片段。我们来看看它是如何实现这些功能的。
一.Main方法在哪里
如果你是从Java或者Python编程语言转过来的，那么你可能很想知道AngularJS里面的main方法在哪里？这个把所有东西启动起来，并且第一个被执行的方法在哪里？JavaScript代码里面负责实例化并且把所有东西组合到一起，然后命令应用开始运行的那个方法在哪里？
事实上，AngularJS并没有main方法，AngularJS使用模块的概念来代替main方法。模块允许我们通过声明的方式来描述应用中的依赖关系，以及如何进行组装和启动。使用这种方式的原因如下：
1.模块是声明式的。这就意味着它编写起来更加容易，同时理解起来也很容易，阅读它就像读普通的英文一样！
2.它是模块化的。这就迫使你去思考如何定义你的组件和依赖关系，让它们变得更加清晰。
3.它让测试更加容易。在单元测试吕，你可以有选择地加入模块，并且可以避免代码中存在无法进行单元测试的内容。同时，在场景测试中，你可以加载其他额外的模块，这样就可以更好地和其他组件配合使用。
例如，在我们的应用中有一个叫做"MyAwesomeApp"的模块。在HTML里面，只要把以下内容添加到<html>标签中（或者从技术上说，可以添加到任何标签中）：
<html ng-app="MyAwesomeApp">
ng-app指令就会告诉AngularJS使用MyAwesomeApp模块来启动你的应用。那么，应该如何定义模块呢？举例来说，我们建议你为服务、指令和过滤器分别定义不同的模块。然后你的主模块可以声明依赖这些模块。
这样可以使得模块管理更加容易，因为它们都是良好的、完备的代码块，每个模块有且只有一种职能。同时，单元测试可以只加载它们所关注的模块，这样就可以减少初始化的次数，单元测试也会变得更精致、更专注。
二.加载和依赖
模块加载动作发生在两个不同的阶段，这一点从函数名上面就可以反映出来，它们分别是Config代码块和Run代码块（或者叫做阶段）。
1.Config代码块
在这一阶段里面，AngularJS会连接并注册好所有数据源。因此，只有数据源和常量可以注入到Config代码块中。那些不确定是否已经初始化好的服务不能注入进来。
2.Run代码块
Run代码块用来启动你的应用，并且在注射器创建完成之后开始执行。为了避免在这一点开始之后再对系统进行配置操作，只有实例和常量可以被注入到Run代码块中。你会发现，在AngularJS中，Run代码块是与main方法最类似的东西。
三.快捷方法
利用模块可以做什么呢？我们可以用它来实例化控制器、指令、过滤器以及服务，但是利用模块类还可以做更多事情。如下模块配置的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);
});
然后可以这样来调用它：
var myGreeter = greeter('Halo');
9.service(name,object)
factory和service之间的不同点在于，factory会直接调用传递给它的函数，然后返回执行的结果；而service将会使用"new"关键字来调用传递给它的构造方法，然后再返回结果。所以，前面的greeter Factory可以替换成下面这个greeter Service：
myApp.service('greeter', Greeter);
每当我们需要一个greeter实例的时候，AngularJS就会调用新的Greeter()来返回一个实例。
10.provider(name,providerFn)
provider是这几个方法中最复杂的部分（显然，也是可配置性最好的部分）。provider中既绑定了factory也绑定了service，并且在注入系统准备完毕之前，还可以享受到配置provider函数的好处（也就是config块）。
我们来看看使用provider改造之后的greeter Service是什么样子：
myApp.provider('greeter', function() {
var salutation = 'Hello';
this.setSalutation = function(s) {
salutation = s;
}
function Greeter(a) {
this.greet = function() {
return salutation + ' ' + a;
}
}
this.$get = function(a) {
return new Greeter(a);
};
});
这样我们就可以在运行时动态设置问候语了（例如，可以根据用户使用的不同语言进行设置）。
var myApp = angular.module(myApp, []).config(function(greeterProvider) {
greeterProvider.setSalutation('Namaste');
});
相关推荐
-
AngularJS学习笔记之依赖注入详解
最近在看AngularJS权威指南,由于各种各样的原因(主要是因为我没有money,好讨厌的有木有......),于是我选择了网上下载电子版的(因为它不要钱,哈哈...),字体也蛮清晰的,总体效果还不错.但是,当我看到左上角的总页码的时候,479页....479....479....俺的小心脏被击穿了二分之一有木有啊,上半身都石化了有木有啊,那种特别想学但是看到页码又不想学的纠结的心情比和女朋友吵架了还复杂有木有啊,我平常看的电子书百位数都不大于3的好伐! 哎,原谅我吧,我应该多看几本新华字典习
-
AngularJS的依赖注入实例分析(使用module和injector)
本文实例分析了AngularJS的依赖注入.分享给大家供大家参考,具体如下: 依赖注入(DI)的好处不再赘言,使用过spring框架的都知道.AngularJS作为前台js框架,也提供了对DI的支持,这是JavaScript/jQuery不具备的特性.angularjs中与DI相关有angular.module().angular.injector(). $injector.$provide.对于一个DI容器来说,必须具备3个要素:服务的注册.依赖关系的声明.对象的获取.比如spring中,服务
-
AngularJS应用开发思维之依赖注入3
找不到的API? AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同. $http 比如,在jQuery中,我们知道它的API通过一个全局对象:$ 暴露出来,当你需要 进行ajax调用时,使用$.ajax()就可以了.这样的API很符合思维的预期. AngularJS也暴露了一个全局对象:angular,也对ajax调用进行封装提供了一个 $http对象,但是,但是,当你试图沿用旧经验访问angular.$http时,发
-
详解AngularJS中的依赖注入机制
依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式.这减轻一个组成部分,从定位的依赖,依赖配置.这有助于使组件可重用,维护和测试. AngularJS提供了一个至高无上的依赖注入机制.它提供了一个可注入彼此依赖下列核心组件. 值 工厂 服务 提供者 常值 值 值是简单的JavaScript对象,它是用来将值传递过程中的配置相位控制器. //define a module var mainApp = angular.module("mainApp", []);
-
AngularJs动态加载模块和依赖注入详解
废话不多说,进入正题... 首先我们看下文件结构: Angular-ocLazyLoad --- demo文件夹 Scripts --- 框架及插件文件夹 angular-1.4.7 --- angular 不解释 angular-ui-router --- uirouter 不解释 oclazyload --- ocLazyload 不解释 bootstrap --- bootstrap 不解释 angular-tree-control-master --- angular-tree-cont
-
AngularJS入门教程之XHR和依赖注入详解
到现在为止,我们使用是硬编码的三条手机记录数据集.现在我们使用AngularJS一个内置服务$http来获取一个更大的手机记录数据集.我们将使用AngularJS的依赖注入(dependency injection (DI))功能来为PhoneListCtrl控制器提供这个AngularJS服务. 请重置工作目录: git checkout -f step-5 刷新浏览器,你现在应该能看到一个20部手机的列表. 步骤4和步骤5之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 数
-
详解Angularjs中的依赖注入
一个对象通常有三种方式可以获得对其依赖的控制权: 在内部创建依赖: 通过全局变量进行引用: 在需要的地方通过参数进行传递 依赖注入是通过第三种方式实现的.比如: function SomeClass(greeter) { this.greeter = greeter; } SomeClass.prototype.greetName = function(name) { this.greeter.greet(name); }; SomeClass能够在运行时访问到内部的greeter,但它并不关心
-
自学实现angularjs依赖注入
在用angular依赖注入时,感觉很好用,他的出现是 为了"削减计算机程序的耦合问题" ,我怀着敬畏与好奇的心情,轻轻的走进了angular源码,看看他到底是怎么实现的,我也想写个这么牛逼的功能.于是就模仿着写了一个,如果有什么不对,请大家批评指正. 其实刚开始的时候我也不知道怎么下手,源码中有些确实晦涩难懂,到现在我也没有看明白,于是我就静下心想一想,他是怎么用的,如下所示: angular.module(/*省略*/) .factory("xxxService"
-
AngularJS 依赖注入详解及示例代码
依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式.这减轻一个组成部分,从定位的依赖,依赖配置.这有助于使组件可重用,维护和测试. AngularJS提供了一个至高无上的依赖注入机制.它提供了一个可注入彼此依赖下列核心组件. 值 工厂 服务 提供者 常值 值 值是简单的JavaScript对象,它是用来将值传递过程中的配置相位控制器. //define a module var mainApp = angular.module("mainApp", []);
-
AngularJS 依赖注入详解和简单实例
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分. 该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一职责原则.与服务定位器模式形成直接对比的是,它允许客户端了解客户端如何使用该系统找到依赖 一句话 --- 没事你不要来找我,有事我会
-
AngularJs Dependency Injection（DI，依赖注入）
一.Dependency Injection(依赖注入) 依赖注入(DI)是一个软件设计模式,处理代码如何得到它所依赖的资源. 关于DI更深层次的讨论,可以参观Dependency Injection(http://en.wikipedia.org/wiki/Dependency_injection),Inversion of Control(http://martinfowler.com/articles/injection.html),也可以参观软件设计模式的书. 1. DI in a nu
-
AngularJS之依赖注入模拟实现
一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的. 下面,我们看看AngularJS中常用的实现方式. 方法一:推断式注入声明,假定参数名称就是依赖的名称.因此,它会在内部调用函数对象的toString()方法,分析并提取出函数参数列表,然后通过$injector将这些参数注入进对象实例. 如下: //方法一:推断式注入声明,假定参数名称就是依赖
-
AngularJS $injector 依赖注入详解
推断式注入 这种注入方式,需要在保证参数名称与服务名称相同.如果代码要经过压缩等操作,就会导致注入失败. app.controller("myCtrl1", function($scope,hello1,hello2){ $scope.hello = function(){ hello1.hello(); hello2.hello(); } }); 标记式注入 这种注入方式,需要设置一个依赖数组,数组内是依赖的服务名字,在函数参数中,可以随意设置参数名称,但是必须保证顺序的一致性. v