深入浅析AngularJS中的module(模块)


Posted in Javascript onJanuary 04, 2016

什么是AngularJS的模块

我们所说的模块,是你的AngularJS应用程序的一个组成部分,它可以是一个Controller,也可以是一个Service服务,也可以是一个过滤器(Filter),也可以是一个directive(指令)等等…都是属于一个模块!

大多数的应用程序都是有一个自己的函数入口方法Main ,用它来进行初始化,以及加载装配各个模块,然后这些模块的组合,构成了你的应用程序,对吧?

但是,but, AngularJS应用程序却不是这样的哦,它没有main 方法,没有函数入口。代替之的是在模块中指定声明这个模块在AngularJS应用程序中该如何去加载,启动。

这种方法有以下几个优点:

1) 使用声明的方式,让人更加容易理解。

2) 你可以更加容易的让你的代码进行重用。

3) 模块的加载顺序就更加容易控制了。因为这些模块是延迟执行的。

4) 对于进行单元测试就变得更加的方便了。更加可靠,你只需要载入这个模块就可以进行测试了。

5) 端对端的测试中,你可以使用模块去重写配置。

在AngularJS中module是一个核心的存在,包括了很多方面,比如controller, config, service, factory, directive, constant, 等等。

在Javascript中如何实现类似module的功能呢?

或者说,我们定义一个函数,如何把函数内的函数向外界开放呢?

我想,可以把函数中的函数作为一个对象的键值,从而向外界开放。

这样说很笼统,其实是这样的:

var myModule = function outerFuction(){
  var method1 = new function(){}
  var method2 = new function(){}
  return{
    method1: method1,
    method2, method2
  }
}
var o = outerFucntion();
o.method1();
o.mehtod2();

举个银行存钱取钱的例子。

var account = function(){
 //余额
 var balance = 0;
 //存钱
 var deposit = function(money){
  balance+=money;
  console.log("卡上余额为: " + balance);
  notifyUser();
 }
 //取钱
 var withdraw = function(money){
  balance -= money;
  console.log("卡上余额为: " + balance)
  notifyUser();
 }
 //通知用户
 var notifyUser = function(){
  console.log("卡上余额有变动");
 }
 return {
  deposit:deposit,
  withdraw: withdraw
 }
}
var a1 = account();
a1.deposit(100);
a1.withdraw(50);

再来到AngularJS,我们已经习惯了这样写:

var app = angular.module('app',[]);
app.config();
app.controller();
app.factory();
...

也就是获取到module,再调用module提供给我们的方法。

查看angular.js源代码,发现:

angular = window.angular || (window.angular = {} )

这是为什么我们能使用angular这个变量的原因。

...
var moduleInstace = {
    provider: invokeLater('$provide','provider'),
    factory: invokeLater('$provider', 'factory'),
    service: invokeLater('$provider', 'service'),
    value: invokeLater('$provide', 'value'),
    constant: invokeLater('$provider', 'constant'...),
    animation: invokeLater('$animateProvider',...),
    filter: invokeLater('$filterProvider',...),
    controller: invokeLater('$controllerProvider',...),
    directive: invokeLater('$compileProvider',...),
    config: config,
}
return moduleInstance;
...

以上的写法正是module的写法。

PS:angular.module('MyApp',[...])和angular.module('MyApp')之间有一个很小但是却很重要的不同点

        angular.module('MyApp',[...])会创建一个新的Angular模块,然后把方括号([...])中的依赖列表加载进来;而angular.module('MyApp')会使用由第一个调用定义的现有的模块。

        所以,对于以下代码,你需要保证在整个应用中只会使用一次:

angular.module('MyApp', [...]) //如果你的应用是模块化的,这里可能是MyModule

        如果你不打算把模块的引用存到一个变量中,然后在整个应用中通过这个变量来引用模块,那么,在其他文件中使用angular.module(MyApp)的方式可以保证得到正确的AngularJS模块引用。模块上的所有东西都必须通过访问这个模块引用来定义,或者在模块定义的地方把那些必备的内容添加上去。

Javascript 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
详解JS函数重载
Dec 04 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
Angular2中监听数据更新的方法
Aug 31 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 #Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 #Javascript
详解Bootstrap glyphicons字体图标
Jan 04 #Javascript
详解Bootstrap按钮
Jan 04 #Javascript
详解Bootstrap四种图片样式
Jan 04 #Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 #Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 #Javascript
You might like
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
python实现TF-IDF算法解析
2018/01/02 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
python list转矩阵的实例讲解
2018/08/04 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
python实现简单井字棋小游戏
2020/03/05 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
python中pyqtgraph知识点总结
2021/01/26 Python
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
青年创业培训欢迎词
2014/01/10 职场文书
八项规定整改方案
2014/02/21 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
优秀员工事迹材料
2014/12/20 职场文书
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
python三子棋游戏
2022/05/04 Python