欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-30 20:54:23
什么是angularjs的模块 我们所说的模块,是你的angularjs应用程序的一个组成部分,它可以是一个controller,也可以是一个service服务,也可以是...

什么是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模块引用。模块上的所有东西都必须通过访问这个模块引用来定义,或者在模块定义的地方把那些必备的内容添加上去。