AngularJs Modules详解及示例代码


Posted in Javascript onSeptember 01, 2016

一、什么是Module?

很多应用都有一个用于初始化、加载(wires是这个意思吗?)和启动应用的main方法。angular应用不需要main方法,作为替代,module提供有指定目的的声明式,描述应用如何启动。这样做有几项优点:

  1. 这过程是声明描述的,更加容易读懂。
  2. 在单元测试中,不需要加载所有module,这对写单元测试很有帮助。
  3. 额外的module可以被加载到情景测试中,可以覆盖一些设置,帮助进行应用的端对端测试(end-to-end test)。
  4. 第三方代码可以作为可复用的module打包到angular中。
  5. module可以通过任意顺序或并行加载(取决于模块执行的延迟性,due to delayed nature of module execution)。
  6.  

二、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:

  1. service module,用于声明service。
  2. directive module,用于声明directive。
  3. filter module,用于声明filter。
  4. 应用级别的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!');
  
});
  });
});
Javascript 相关文章推荐
js constructor的实际作用分析
Nov 15 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 #Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 #Javascript
AngularJs Forms详解及简单示例
Sep 01 #Javascript
vue.js入门教程之计算属性
Sep 01 #Javascript
AngularJs expression详解及简单示例
Sep 01 #Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 #Javascript
vue.js入门教程之基础语法小结
Sep 01 #Javascript
You might like
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
php实现简单加入购物车功能
2017/03/07 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
keras导入weights方式
2020/06/12 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
实习生自荐信范文分享
2013/11/27 职场文书
劳动之星获奖感言
2014/02/01 职场文书
高二政治教学反思
2014/02/01 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
英文求职信范文
2014/05/23 职场文书
诚信贷款承诺书
2014/05/30 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
暑假安全保证书
2015/02/28 职场文书
如何撰写创业策划书
2019/06/27 职场文书