深入浅析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 相关文章推荐
js显示时间 js显示最后修改时间
Jan 02 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
微信小程序如何实现五星评价功能
Oct 15 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 CodeBase:将时间显示为"刚刚""n分钟/小时前"的方法详解
2013/06/06 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
js取得url地址参数实例
2013/02/22 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
javascript异步编程的六种方式总结
2019/05/17 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
浅谈Python中的私有变量
2018/02/28 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
Python分类测试代码实例汇总
2020/07/23 Python
python识别验证码的思路及解决方案
2020/09/13 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
Born鞋子官网:Born Shoes
2017/04/06 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
最新的咖啡店创业计划书
2013/12/30 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
竞选部长演讲稿
2014/04/26 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
处理canvas绘制图片模糊问题
2022/05/11 Javascript