深入浅析AngularJS中的module(模块)  更新时间:2016年01月04日 11:26:35   作者:Darren Ji   我们所说的模块,是你的AngularJS应用程序的一个组成部分,它可以是一个Controller,也可以是一个Service服务,也可以是一个过滤器(Filter),也可以是一个directive(指令)等等…都是属于一个模块,本文给大家介绍AngularJS中的module(模块) ,感兴趣的朋友一起学习吧 什么是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的Module模式编程深入分析 nodejs中exports与module.exports的区别详细介绍 seajs1.3.0源码解析之module依赖有序加载 node.js的exports、module.exports与ES6的export、export default深入详解 详解Sea.js中Module.exports和exports的区别 node.js报错:Cannot find module ”ejs”的解决办法 node.js中module.exports与exports用法上的区别 详解AngularJS中module模块的导入导出 AngularJS Module方法详解 js module大战 angularjs module 相关文章 AngularJS基于factory创建自定义服务的方法详解 这篇文章主要介绍了AngularJS基于factory创建自定义服务的方法,结合实例形式分析了AngularJS使用factory创建自定义服务的具体步骤、操作技巧与相关注意事项,需要的朋友可以参考下 2017-05-05 angularjs自定义ng-model标签的属性 这篇文章主要介绍了angularjs自定义ng-model标签的属性的相关资料,需要的朋友可以参考下 2016-01-01 AngularJS表单验证中级篇(3) 这篇文章主要为大家详细介绍了AngularJS表单验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-09-09 AngularJS中的按需加载ocLazyLoad示例 本篇文章主要介绍了AngularJS中的按需加载ocLazyLoad,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-01-01 Angular.JS读取数据库数据调用完整实例 这篇文章主要介绍了Angular.JS读取数据库数据调用,结合完整实例形式分析了AngularJS使用$http.get方法与后台php交互读取数据库数据相关操作技巧,需要的朋友可以参考下 2019-07-07 Angular 2父子组件数据传递之@ViewChild获取子组件详解 这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@ViewChild获取子组件的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定参考学习价值,需要的朋友们下面来一起看看吧。 2017-07-07 AngualrJS中每次$http请求时的一个遮罩层Directive AngularJS是一款非常强大的前端MVC框架。接下来通过本文给大家介绍AngualrJS中每次$http请求时的一个遮罩层Directive,本文非常具有参考借鉴价值,特此分享供大家学习 2016-01-01 Angular2实现组件交互的方法分析 这篇文章主要介绍了Angular2实现组件交互的方法,结合实例形式总结分析了Angular2中组件交互的相关操作技巧与注意事项,需要的朋友可以参考下 2017-12-12 angularjs定时任务的设置与清除示例 本篇文章主要介绍了angularjs定时任务的设置与清除示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 详解Angular4中路由Router类的跳转navigate 这篇文章主要介绍了详解Angular4中路由Router类的跳转navigate,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-06-06 最新评论

什么是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的Module模式编程深入分析
  • nodejs中exports与module.exports的区别详细介绍
  • seajs1.3.0源码解析之module依赖有序加载
  • node.js的exports、module.exports与ES6的export、export default深入详解
  • 详解Sea.js中Module.exports和exports的区别
  • node.js报错:Cannot find module ”ejs”的解决办法
  • node.js中module.exports与exports用法上的区别
  • 详解AngularJS中module模块的导入导出
  • AngularJS Module方法详解
  • js module大战
张贴在3