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 相关文章推荐
javaScript arguments 对象使用介绍
Oct 18 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
JavaScript实现简易计算器小功能
Oct 22 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
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
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
js删除所有的cookie的代码
2010/11/25 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
十条建议帮你提高Python编程效率
2016/02/16 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
python3去掉string中的标点符号方法
2019/01/22 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
写好自荐信的技巧
2013/11/08 职场文书
机械绘图员岗位职责
2013/11/19 职场文书
模具专业自荐信
2014/05/29 职场文书
我的中国梦口号
2014/06/16 职场文书
上海世博会口号
2014/06/19 职场文书
会计学专业自荐信
2014/06/25 职场文书
公司车队管理制度
2015/08/04 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL