AngularJs学习笔记--Modules
原版地址：http://code.angularjs.org/1.0.2/docs/guide/module
一、什么是Module？
很多应用都有一个用于初始化、加载（wires是这个意思吗？）和启动应用的main方法。angular应用不需要main方法，作为替代，module提供有指定目的的声明式，描述应用如何启动。这样做有几项优点：
- 这过程是声明描述的，更加容易读懂。
- 在单元测试中，不需要加载所有module，这对写单元测试很有帮助。
- 额外的module可以被加载到情景测试中，可以覆盖一些设置，帮助进行应用的端对端测试（end-to-end test）。
- 第三方代码可以作为可复用的module打包到angular中。
- module可以通过任意顺序或并行加载（取决于模块执行的延迟性，due to delayed nature of module execution）。
二、The Basics（基础）
我们很迫切想知道如何让Hello World module能够工作。下面有几个关键的事情要注意：
- module API（http://code.angularjs.org/1.0.2/docs/api/angular.Module）
- 注意的提及的在<html ng-app=”myApp”>中的myApp module，它让启动器启动我们定义的myApp module。
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>basics</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
<div class="ng-cloak">
{{'Kitty' | greet}}
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
var simpleModule = angular.module("myApp", []);
simpleModule.filter("greet", function () {
return function(name) {
return "Hello " + name + " !";
}
});
</script>
</body>
</html>
三、（Recommended Setup）推荐设置
虽然上面的例子很简单，它不属于大规模的应用。我们建议将自己的应用按照如下建议，拆分为多个module：
- service module，用于声明service。
- directive module，用于声明directive。
- filter module，用于声明filter。
- 应用级别的module，依赖上述的module，并且包含初始化的代码。
这样划分的理由是，当我们在测试的时候，往往需要忽略那些让测试变得困难的初始化代码。通过将代码分成独立的module，在测试中就可以很容易地忽略那些代码。这样，我们就可以更加专注在加载相应的module进行测试。
上面的只是一个建议，可以随意地按照自己的需求制定。
四、Module Loading & Dependencies（模块加载和依赖）
module是配置（configuration）的集合，执行在启动应用的进程中应用的块（blocks）。在它的最简单的形式中，由两类block组成：
1.配置块（configuration blocks）：在provider注册和配置的过程中执行的。只有provider和constant（常量？）可以被注入（injected）到configuration blocks中。这是为了避免出现在service配置完毕之前service就被执行的意外。
2.运行块（run blocks）：在injector创建完成后执行，用于启动应用。只有实例（instances）和常量（constants）可以被注入到run block中。这是为了避免进一步的系统配置在程序运行的过程中执行。
angular.module('myModule', []).
config(function(injectables) { // provider-injector
// 这里是config block的一个例子
// 我们可以根据需要，弄N个这样的东东
// 我们可以在这里注入Providers (不是实例，not instances)到config block里面
}).
run(function(injectables) { // instance-injector
// 这里是一个run block的例子
// 我们可以根据需要，弄N个这样的东东
// 我们只能注入实例（instances ）（不是Providers）到run block里面
});
a) Configuration Blocks（配置块）
有一个方便的方法在module中，它相当于config block。例如：
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', ...);
});
configuration blocks被应用的顺序，与它们的注册的顺序一致。对于常量定义来说，是一种额外的情况，即放置在configuration blocks开头的常量定义。
b) Run Blocks（应用块）
run block是在angular中最接近main方法的东东。run block是必须执行，用于启动应用的代码。它将会在所有service配置、injector创建完毕后执行。run block通常包含那些比较难以进行单元测试的代码，就是因为这个原因，这些代码应该定义在一个独立的module中，让这些代码可以在单元测试中被忽略。
c) Dependencies（依赖）
一个module可以列出它所依赖的其他module。依赖一个module，意味着被请求（required）的module（被依赖的）必须在进行请求（requiring）module（需要依赖其他module的module，请求方）加载之前加载完成。换一种说法，被请求的module的configuration block会在请求的module的configuration block执行前执行（before the configuration blocks or the requiring module，这里的or怎么解释呢？）。对于run block也是这个道理。每一个module只能够被加载一次，即使有多个其他module需要（require）它。
d) Asynchronous Loading（异步加载）
module是管理$injector配置的方法之一，不用对加载脚本到VM做任何事情。现在已经有现成的项目专门用于处理脚本加载，也可以用到angular中。因为module在加载的过程中不做任何事情，它们可以按照任意的顺序被加载到VM中。脚本加载器可以利用这个特性，进行并行加载。
五、Unit Testing（单元测试）
在单元测试的最简单的形式中，其中一个是在测试中实例化一个应用的子集，然后运行它们。重要的是，我们需要意识到对于每一个injector，每一个module只会被加载一次。通常一个应用只会有一个injector。但在测试中，每一个测试用例都有它的injector，这意味着在每一个VM中，module会被多次加载。正确地构建module，将对单元测试有帮助，正如下面的例子：
在这个例子中，我们准备假设定义如下的module：
angular.module('greetMod', []).
factory('alert', function($window) {
return function(text) {
$window.alert(text);
};
})
.value('salutation', 'Hello')
.factory('greet', function(alert, salutation) {
return function(name) {
alert(salutation + ' ' + name + '!');
};
});
让我们写一些测试用例：
describe('myApp', function() {
// 加载应用响应的module，然后加载指定的将$window重写为mock版本的测试module，
// 这样做，当进行window.alert()时，测试器就不会因被真正的alert窗口阻挡而停止
//这里是一个在测试中覆盖配置信息的例子
beforeEach(module('greetMod', function($provide) {//这里看来是要将真正的$window替换为以下的东东
$provide.value('$window', {
alert: jasmine.createSpy('alert')
});
}));
// inject()会创建一个injector，并且注入greet和$window到测试中。
// 测试不需要关心如何写应用，只需要关注如何测试应用。
it('should alert on $window', inject(function(greet, $window) {
greet('World');
expect($window.alert).toHaveBeenCalledWith('Hello World!');
}));
// 这里是在测试中通过行内module和inject方法来覆盖配置的方法
it('should alert using the alert service', function() {
var alertSpy = jasmine.createSpy('alert');
module(function($provide) {
$provide.value('alert', alertSpy);
});
inject(function(greet) {
greet('World');
expect(alertSpy).toHaveBeenCalledWith('Hello World!');
});
});
});
- AngularJs学习笔记--bootstrap
- AngularJs学习笔记--html compiler
- AngularJs学习笔记--concepts
- AngularJs学习笔记--directive
- AngularJs学习笔记--expression
- AngularJs学习笔记--Forms
- AngularJs学习笔记--I18n/L10n
- AngularJs学习笔记--IE Compatibility
- AngularJs学习笔记--Modules
- AngularJs学习笔记--Scope
- AngularJs学习笔记--Dependency Injection
- AngularJs学习笔记--Understanding the Model Component
- AngularJs学习笔记--Understanding the Controller Component
- AngularJs学习笔记--E2E Testing
- AngularJs学习笔记--Understanding Angular Templates
- AngularJs学习笔记--Using $location
- AngularJs学习笔记--Creating Services
- AngularJs学习笔记--Injecting Services Into Controllers
- AngularJs学习笔记--Managing Service Dependencies
- AngularJs学习笔记--unit-testing
AngularJs学习笔记--Modules的更多相关文章
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- Django 入门项目案例开发（中）
关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. 昨天已经描述了如何搭建Django的开发环境,今天描述业务流程,具体我们要实现一个什么样的业务 ...
- Flask & Vue 构建前后端分离的应用
Flask & Vue 构建前后端分离的应用 最近在使用 Flask 制作基于 HTML5 的桌面应用,前面写过<用 Python 构建 web 应用>,借助于完善的 Flask ...
- 如何在不接入微信API的情况下自定义分享内容（图片、链接、标题）
方法如下: 1.设置分享title:动态改变document.title值即可: document.title = 'test' 2.设置分享图片:在页面隐藏一张尺寸大于290*290的图(图片需要容 ...
- 从零实现一个简易的jQuery框架之二—核心思路详解
如何读源码 jQuery整体框架甚是复杂,也不易读懂.但是若想要在前端的路上走得更远.更好,研究分析前端的框架无疑是进阶路上必经之路.但是庞大的源码往往让我们不知道从何处开始下手.在很长的时间里我也被 ...
- EPPlus导入导出不占用进程
导入: using (ExcelPackage package = new ExcelPackage(new FileStream(openFile.FileName, FileMode.Open, ...
- JQ(查找)
1.由下级到上级再到下级 var aa=$("td:eq(0)").parents("tr").find("td:eq(1)"); 2.
- sharepint 2013 添加subsite
在用服务器端对象模型往里面添加subsite的时候,照着书上的代码,结果,失败.报错 not suported language. bing了半天,说是语言未支持,又是修改系统区域,显示语言等,还是失 ...
- Python OOP面向对象
一.什么是面向对象的程序设计 1.面向过程 程序设计:核心是过程二字,过程指的是解决问题的步骤,即先干什么再干什么......面向过程的设计就好比精心设计好一条流水线,是一种机械式的思维方式. 优点是 ...
- Bzoj3510：首都
Sol \(LCT\)动态维护树重心 方法一 因为只有加边,所以可以暴力启发式合并,维护重心 维护子树信息,子树大小不超过一半 复杂度两只\(log\) 方法二 扣出两个重心的链,链上二分找 每次\( ...
- Python-MRO和C3算法
一. python多继承 在前面的学习过程中,我们已经知道了python中类与类之间可以有继承关系,当出现x是一种y的时候就可以使用继承关系.即'is-a'关系,在继承关系中子类自动拥有父类中除了私有 ...