AngularJS中的模块详解


Posted in Javascript onJanuary 29, 2015

在讲angularjs的模块之前,我们先介绍一下angular的一些知识点:

AngularJS是纯客户端技术,完全用Javascript编写的。它使用的是网页开发的常规技术(HTML,CSS,Javascript),目的是让网页应用开发更快更容易。

AngularJS简化应用开发的一个重要方法是,将一个些通用的低级开发操作包装起来提供给开发者。AngularJS会自动处理好这些低级操作。它们包括:

1.DOM操作
2.设置事件的监听
3.输入验证,因为AngularJS会处理大部分这些操作,所以开发者就能更多的专注在应用的业务逻辑上,更少地编写那些重复性的、易错的、低级的代码。

在AngularJS简化开发的同时,它也为客户端带来了一些精巧的技术,它们包括:

1.数据、业务逻辑、视图的分离
2.数据和视图的自动绑定
3.通用服务
4.依赖注入(主要用于聚合服务)
5.可扩展的HTML编译器(完全由JavaScript编写)
6.易于测试
7.客户端对这些技术的需求其实已经存在很久了。

同时,你还可以用AngularJS来开发单页或者多页的应用,不过其主要还是用来开发单页的。 AngularJS支持浏览器的历史操作,向前,向后按钮,单页应用中的收藏操作。

接下来,我们来详细讲解angularJS的模块。

大部分应用都有一个主方法用来实例化、组织、启动应用。AngularJS应用没有主方法,而是使用模块来声明应用应该如何启动。这种方式有以下几个优点:

1.启动过程是声明式的,所以更容易懂。
2.在单元测试是不需要加载全部模块的,因此这种方式有助于写单元测试。
3.可以在特定情况的测试中增加额外的模块,这些模块能更改配置,能帮助进行端对端的测试。
4.第三方代码可以打包成可重用的模块。
5.模块可以以任何先后或者并行的顺序加载(因为模块的执行本身是延迟的)。

举个例子:

<!doctype html>
<html ng-app="myApp">
 <head>
  <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
  <script>
      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 + '!';
 



};



});
  </script>
 </head>
 <body>
  <div>
   {{ 'World' | greet }}
  </div>
 </body>
</html>

上面的例子,我们是通过在<html ng-app="myApp">中进行指定,来实现使用myApp这个模块启动应用的。

以上这个例子写法很简单,但是不适合用同样的写法来写大型应用。我们推荐是将你的应用拆分成以下几个模块:

1.一个服务模块,用来做服务的声明。
2.一个指令模块,用来做指令的声明。
3.一个过滤器模块,用来做过滤器声明。
4.一个依赖以上模块的应用级模块,它包含初始化代码。

举个例子:

<!doctype html>
<html ng-app="xmpl">
 <head>
  <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
  <script src="script.js"></script>
 </head>
 <body>
  <div ng-controller="XmplController">
   {{ greeting }}!
  </div>
 </body>
</html>
[/code]

script.js:

[code]
angular.module('xmpl.service', []).   //服务模块
 value('greeter', {    //自定义greeter对象
  salutation: 'Hello',
  localize: function(localization) {
    this.salutation = localization.salutation;
  },
  greet: function(name) {
    return this.salutation + ' ' + name + '!';
  }
 }).
 value('user', {   //自定义user对象
  load: function(name) {
    this.name = name;
  }
 });
angular.module('xmpl.directive', []);  //指令模块
angular.module('xmpl.filter', []);   //过滤器模块
angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']).  //模块xmpl依赖于数组中的模块
 run(function(greeter, user) {
  // 初始化代码,应用启动时,会自动执行
  greeter.localize({
    salutation: 'Bonjour'
  });
  user.load('World');
 })
// A Controller for your app
var XmplController = function($scope, greeter, user) {
   $scope.greeting = greeter.greet(user.name);
}

这样拆分的原因是,在你的测试中常常需要忽略掉初始化代码,因为这些代码比较难测试。通过把它拆分出来就能在测试中方便地忽视掉它。通过只加载和当前测试相关的模块,也能使测试更专一。以上只是一个建议,你可以放心根据你的具体情况来调整。

一个模块就是一系列配置和代码块的集合,它们是在启动阶段就附加到应用上的。一个最简单的模块由两类代码块集合组成的:

配置代码块 - 在注入提供者注入和配置阶段执行。只有注入提供者和常量可以被注入到配置块中。这是为了防止服务在被配置好之前就被提前初始化。
运行代码块 - 在注入器被创建后执行,被用来启动应用的。只有实例和常量能被注入到运行块中。这是为了防止在运行后还出现对系统的配置。

代码实现:

angular.module('myModule', []).  
config(function(injectables) { // provider-injector      配置代码块


// This is an example of config block.


// You can have as many of these as you want.


// You can only inject Providers (not instances)


// into the config blocks.

}). run(function(injectables) { // instance-injector      运行代码块


// This is an example of a run block.


// You can have as many of these as you want.


// You can only inject instances (not Providers)


// into the run blocks

});

模块还有一些配置的简便方法,使用它们的效果等同于使用代码块。举个例子:

angular.module('myModule', []).
 value('a', 123).
 factory('a', function() { return 123; }).
 directive('directiveName', ...).
 filter('filterName', ...);
// is same as
angular.module('myModule', []).
 config(function($provide, $compileProvider, $filterProvider) {
  $provide.value('a', 123)
  $provide.factory('a', function() { return 123; })
  $compileProvider.directive('directiveName', ...).
  $filterProvider.register('filterName', ...);
 });

配置块会按照$provide, $compileProvider, $filterProvider,注册的顺序,依次被应用。唯一的例外是对常量的定义,它们应该始终放在配置块的开始处。

运行块是AngularJS中最像主方法的东西。一个运行块就是一段用来启动应用的代码。它在所有服务都被配置和所有的注入器都被创建后执行。运行块通常包含了一些难以测试的代码,所以它们应该写在单独的模块里,这样在单元测试时就可以忽略它们了。

模块可以把其他模块列为它的依赖。“依赖某个模块”意味着需要把这个被依赖的模块在本块模块之前被加载。换句话说被依赖模块的配置块会在本模块配置块前被执行。运行块也是一样。任何一个模块都只能被加载一次,即使它被多个模块依赖。

模块是一种用来管理$injector配置的方法,和脚本的加载没有关系。现在网上已有很多控制模块加载的库,它们可以和AngularJS配合使用。因为在加载期间模块不做任何事情,所以它们可以以任意顺序或者并行方式加载

Javascript 相关文章推荐
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
jquery实现动态画圆
Dec 04 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 #Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 #Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 #Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 #Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 #Javascript
javascript面向对象程序设计(一)
Jan 29 #Javascript
jquery调取json数据实现省市级联的方法
Jan 29 #Javascript
You might like
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
php之Memcache学习笔记
2013/06/17 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
javascript 动态添加表格行
2006/06/22 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
python+opencv实现动态物体追踪
2018/01/09 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
《半截蜡烛》教学反思
2016/02/19 职场文书