什么是AngularJS的模塊

我們所說的模塊，是你的AngularJS應(yīng)用程序的一個(gè)組成部分，它可以是一個(gè)Controller，也可以是一個(gè)Service服務(wù)，也可以是一個(gè)過濾器(Filter)，也可以是一個(gè)directive(指令)等等…都是屬于一個(gè)模塊！

大多數(shù)的應(yīng)用程序都是有一個(gè)自己的函數(shù)入口方法Main ，用它來進(jìn)行初始化，以及加載裝配各個(gè)模塊，然后這些模塊的組合，構(gòu)成了你的應(yīng)用程序，對(duì)吧？

但是，but， AngularJS應(yīng)用程序卻不是這樣的哦，它沒有main 方法，沒有函數(shù)入口。代替之的是在模塊中指定聲明這個(gè)模塊在AngularJS應(yīng)用程序中該如何去加載，啟動(dòng)。

這種方法有以下幾個(gè)優(yōu)點(diǎn)：

1) 使用聲明的方式，讓人更加容易理解。

2) 你可以更加容易的讓你的代碼進(jìn)行重用。

3) 模塊的加載順序就更加容易控制了。因?yàn)檫@些模塊是延遲執(zhí)行的。

4) 對(duì)于進(jìn)行單元測(cè)試就變得更加的方便了。更加可靠，你只需要載入這個(gè)模塊就可以進(jìn)行測(cè)試了。

5) 端對(duì)端的測(cè)試中，你可以使用模塊去重寫配置。

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

在Javascript中如何實(shí)現(xiàn)類似module的功能呢？

或者說，我們定義一個(gè)函數(shù)，如何把函數(shù)內(nèi)的函數(shù)向外界開放呢？

我想，可以把函數(shù)中的函數(shù)作為一個(gè)對(duì)象的鍵值，從而向外界開放。

這樣說很籠統(tǒng)，其實(shí)是這樣的：

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

舉個(gè)銀行存錢取錢的例子。

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("卡上余額有變動(dòng)");
 }
 return {
  deposit:deposit,
  withdraw: withdraw
 }
}
var a1 = account();
a1.deposit(100);
a1.withdraw(50); 

再來到AngularJS，我們已經(jīng)習(xí)慣了這樣寫：

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

也就是獲取到module,再調(diào)用module提供給我們的方法。

查看angular.js源代碼，發(fā)現(xiàn)：

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

這是為什么我們能使用angular這個(gè)變量的原因。

...
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')之間有一個(gè)很小但是卻很重要的不同點(diǎn)

        angular.module('MyApp',[...])會(huì)創(chuàng)建一個(gè)新的Angular模塊，然后把方括號(hào)（[...]）中的依賴列表加載進(jìn)來；而angular.module('MyApp')會(huì)使用由第一個(gè)調(diào)用定義的現(xiàn)有的模塊。

        所以，對(duì)于以下代碼，你需要保證在整個(gè)應(yīng)用中只會(huì)使用一次：

angular.module('MyApp', [...]) //如果你的應(yīng)用是模塊化的，這里可能是MyModule

        如果你不打算把模塊的引用存到一個(gè)變量中，然后在整個(gè)應(yīng)用中通過這個(gè)變量來引用模塊，那么，在其他文件中使用angular.module(MyApp)的方式可以保證得到正確的AngularJS模塊引用。模塊上的所有東西都必須通過訪問這個(gè)模塊引用來定義，或者在模塊定義的地方把那些必備的內(nèi)容添加上去。

最新評(píng)論