原版地址: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!');
  });
});
});
 
 
 
 
 
 
 
 
  1. AngularJs学习笔记--bootstrap
  2. AngularJs学习笔记--html compiler
  3. AngularJs学习笔记--concepts
  4. AngularJs学习笔记--directive
  5. AngularJs学习笔记--expression
  6. AngularJs学习笔记--Forms
  7. AngularJs学习笔记--I18n/L10n
  8. AngularJs学习笔记--IE Compatibility
  9. AngularJs学习笔记--Modules
  10. AngularJs学习笔记--Scope
  11. AngularJs学习笔记--Dependency Injection
  12. AngularJs学习笔记--Understanding the Model Component
  13. AngularJs学习笔记--Understanding the Controller Component
  14. AngularJs学习笔记--E2E Testing
  15. AngularJs学习笔记--Understanding Angular Templates
  16. AngularJs学习笔记--Using $location
  17. AngularJs学习笔记--Creating Services
  18. AngularJs学习笔记--Injecting Services Into Controllers
  19. AngularJs学习笔记--Managing Service Dependencies
  20. AngularJs学习笔记--unit-testing

AngularJs学习笔记--Modules的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  5. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  6. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  9. AngularJs学习笔记--unit-testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...

随机推荐

  1. cesium运行环境搭建

    cesiumjs是什么 一个世界级3D地球仪和地图的开源JavaScript库. 1.安装node.js 环境 1)下载node.js 官网:https://nodejs.org/en/ 下载完成后双 ...

  2. Splunk和ELK深度对比

    转自:http://blog.51cto.com/splunkchina/1948105 日志处理两大生态Splunk和ELK深度对比 heijunmasd 0人评论 5312人阅读 2017-07- ...

  3. How to push master to QA branch in GIT

    1.  git branch -d QA2.  git branch QA master3.  git checkout QA4.  git push origin QA(if push error, ...

  4. Full postback triggered by LinkButton inside GridView inside UpdatePanel

    GridView inside of a UpdatePanel,get the button to trigger a partial postback <asp:ScriptManager ...

  5. Javascript制作伸缩的二级菜单

    1.javascript方法 <style> #navigation { width: 200px; font-family: Arial; } #navigation > ul { ...

  6. Map常用集合遍历

    Map集合遍历的四种方式理解和简单使用 Map集合是键值对形式存储值的,所以遍历Map集合无非就是获取键和值,根据实际需求,进行获取键和值 1:无非就是通过map.keySet()获取到值,然后根据键 ...

  7. 2013 Warm up 3 -- Skill --- dp

    题意:求n位数字,满足非递减的个数. dp[ i ] [ j ] = sum( dp[i -1] [ k ] );  k =>( j , 9); #include<iostream> ...

  8. 1、springboot之HelloWorld

    最基本的,官网copy 创建maven项目 maven中添加 <parent> <groupId>org.springframework.boot</groupId> ...

  9. [TJOI2007]小朋友

    题面 Luogu Sol 弦图最大独立集 做法见上篇博客 # include <bits/stdc++.h> # define RG register # define IL inline ...

  10. css3动画基础详解(@keyframes和animation)

    我们经常会看到CSS3能制作出很炫酷的动画效果,但是自己却只能做一些简单的.原因是对CSS3动画只知其一,不知其二.最近正好有做动画的项目,于是花时间将css3动画做了一个探究之旅,记录在册. 动画是 ...