本文示例代碼下載：modulePattern.zip - 所有的 4 個(gè) HTML 文件  以及 panacea.js - 1.6 KB

介紹

 AngularJS 的庫(kù)里面有很多東西，但本文中我只想專(zhuān)注于小的，針對(duì)特定主題的庫(kù)，我相信通過(guò)它們能對(duì)Angular有一個(gè)較好的介紹.  理解這篇文章并不需要你有任何Angular相關(guān)的，甚至是JavaScript的經(jīng)驗(yàn)。希望你能從本文中看到一些使用Angular的好處，并樂(lè)于動(dòng)手嘗試.
背景

我使用Angular有一段時(shí)間了，而在學(xué)習(xí)Angular的時(shí)候，我也喜歡構(gòu)建一些樣例，所以當(dāng)我一開(kāi)始深入進(jìn)去的時(shí)候，對(duì)于模塊或者JavaScript的設(shè)計(jì)模式，我也沒(méi)有多想，那樣對(duì)保持代碼組織和條理性有幫助.  那就是所有的重點(diǎn)：保持代碼的組織和條理性.  因此，現(xiàn)在我回過(guò)頭來(lái)，創(chuàng)建了這個(gè)極其小巧的樣例，以展示使用模塊可以有多簡(jiǎn)單.  一路走來(lái)，我希望它能夠成為一篇好的對(duì)Angular的介紹.

（大多數(shù)）文章在闡述模式時(shí)的問(wèn)題

大多數(shù)時(shí)候人們都會(huì)嘗試去在讀者知道模式是啥概念之前就開(kāi)始闡述一個(gè)模式，而這基本上誤導(dǎo)了每一個(gè)人.  這里要努力使得本文盡量簡(jiǎn)單，讓我們首先來(lái)看一看這個(gè)問(wèn)題吧。哪個(gè)問(wèn)題呢？就是有關(guān)默認(rèn)會(huì)在全局內(nèi)存空間被創(chuàng)建的所有東西的Javascript的問(wèn)題.

下面就是我所說(shuō)的意思.
JavaScript 默認(rèn)的全局問(wèn)題

設(shè)想你的HTML中有下面這樣一段腳本.
 

<script>
   var isDoingWork = false;
</script>

范圍?

你清楚這個(gè)變量的范圍么?
是的，它是全局的。這個(gè)布爾值實(shí)際上被添加到了瀏覽器的全局窗口對(duì)象中. 

把它設(shè)置到Action中

這里你可以看到它在Action中是怎樣的.

•     下載本文的代碼樣例.
•     在你的瀏覽器中打開(kāi) modulePattern.htm .
•     打開(kāi)瀏覽器開(kāi)發(fā)工具 -- F12(Chrome, IE) or Ctrl-Shift-I (Opera) -- (那樣就可以看見(jiàn)控制臺(tái)了)
•     在瀏覽器工具控制臺(tái)下，輸入: isDoingWork，然后回車(chē)<ENTER>
•     你會(huì)看到輸出的值為false.
•     現(xiàn)在輸入 : isDoingWork = true，然后回車(chē)<ENTER>
•     如此下載的值就為true了. 你已經(jīng)改變了這個(gè)值.
•     你可以看到這個(gè)值已經(jīng)通過(guò)輸入doingwindow.isDoingWork = true然后回車(chē)<ENTER>，被添加到了全局窗口對(duì)象之中.

這可能會(huì)造成一些名字沖突，也會(huì)導(dǎo)致一些嚴(yán)重的bug. 這也許對(duì)你而言有點(diǎn)杞人憂天了，是不?  但是請(qǐng)?jiān)O(shè)想你是決定要去實(shí)現(xiàn)某一個(gè)新的JS庫(kù)，它每分每秒都可以被創(chuàng)建出來(lái).  假設(shè)你發(fā)現(xiàn)了這個(gè)叫做 Panacea.js 的很棒的庫(kù)，它將解決你所有的問(wèn)題.

因此你向下面這樣在你的頁(yè)面中引用了它:
 

<script src="panacea.js"></script>

如此簡(jiǎn)單，你就已經(jīng)解決之前你遇到的所有問(wèn)題. 然而，因?yàn)樗且粋€(gè)龐大的庫(kù)，而你只想要解決方法，卻不回去深挖這個(gè)龐大（幾千行代碼）源文件里的每一行代碼.  而深埋在 Panacea.js 里面某個(gè)角落的確實(shí)下面這樣的代碼:
 

var isDoingWork = false;
 
setInterval(function(){isDoingWork = !isDoingWork;}, 3000);

這代碼真是酷，你知道嗎?

每個(gè)3秒，它都會(huì)將這個(gè)布爾值設(shè)置成相對(duì)的值。啊!

自己動(dòng)手看看

如果你想要自己動(dòng)手驗(yàn)證下這個(gè)東西，你可以做下面這幾步:

•     下載本文的樣例代碼.
•     在你的瀏覽器中打開(kāi) modulePattern2.htm .
•     打開(kāi)瀏覽器開(kāi)發(fā)工具 -- F12(Chrome, IE) 或者 Ctrl-Shift-I (Opera) -- (這樣你就可以看到控制臺(tái)了)
•     在瀏覽器開(kāi)發(fā)工具的控制臺(tái)下，輸入 : isDoingWork 然后回車(chē)<ENTER>
•     將第4步多重復(fù)幾次，你將會(huì)發(fā)現(xiàn)isDoingWork的值會(huì)每個(gè)大約3秒鐘變化一次.

那這是不是很棒呢?
我的第一個(gè)觀點(diǎn) : 模塊模式是很有用的

我需要為此做出解釋?zhuān)瑸榱艘蚰阏故緸槭裁?JavaScript 的模塊模式是很有用的.  我得想你展示 JavaScript 的模塊模式，那樣我就可以告訴你它是如何在AngularJS中被使用或?qū)崿F(xiàn)的了. 
 
模塊模式：封裝

如此，實(shí)際就是，模塊模式基本上就是封裝了.  封裝聽(tīng)起來(lái)很熟悉，如果你有點(diǎn)面向?qū)ο缶幊探?jīng)歷的話 -- 而我也希望你能有點(diǎn)這個(gè)經(jīng)驗(yàn).  封裝是面向?qū)ο缶幊痰娜瓌t之一。封裝的另外一個(gè)說(shuō)法就是數(shù)據(jù)隱藏。在經(jīng)典的面向?qū)ο缶幊讨小煌贘avaScript所依賴(lài)的原型化OOP -- 數(shù)據(jù)隱藏是構(gòu)建一個(gè)類(lèi)模板的內(nèi)在組成部分.

例如在 C#中， Animal 類(lèi)的封裝 -- 隱藏?cái)?shù)據(jù) -- 特定的值被關(guān)聯(lián)到Animal對(duì)象. 那樣，如果某人決定變更那些值，他或他必須明確的通過(guò)初始化一個(gè)Animal對(duì)象并設(shè)置這個(gè)對(duì)象的值來(lái)達(dá)到目的.  在JavaScript中，我們則可以隨意的在全局窗口對(duì)象中設(shè)置值.

public class Animal
 
{
   // constructor allows user to set the commonName
   public animal(string name)
   {
    this.commonName = name;
   }
   // making commonName private hides (encapsulates) it in the class
   private string commonName;
   //explicitly exposing the value for reading only
   public string CommonName get { return this.commonName  }
}

在JavaScript中，模塊已經(jīng)被創(chuàng)建用來(lái)模擬這種封裝行為了，如此我們就不會(huì)去將我們的變量組織到一個(gè)全局的命名空間中，并造成了隱藏很深的難以被發(fā)現(xiàn)和修復(fù)的問(wèn)題.

現(xiàn)在你知道為什么了，讓我們來(lái)看看如何會(huì)是這樣的.

函數(shù)被立即調(diào)用的表達(dá)式(IIFE)

看上去就好像每次我們向前推進(jìn)一步，我們都要走點(diǎn)旁門(mén)左道.  因?yàn)橐@得能讓我們創(chuàng)建模塊模式的JavaScript語(yǔ)法，我們就得去了解一種叫做函數(shù)被立即調(diào)用的表達(dá)式語(yǔ)法，也叫做IIFE ( IIFE 發(fā)音是 "iffy").

最基礎(chǔ)的 IIFE 看起來(lái)像這樣:
 

(function(){
  // lines
  // of
  // code
}());

如果你從來(lái)沒(méi)有看到過(guò)像這樣的東西，那你就有點(diǎn)說(shuō)不過(guò)去了.
立即被調(diào)用

首先，這個(gè)名稱(chēng)的第一部分叫做立即被調(diào)用的原因是，一般包含這個(gè)特殊函數(shù)的源文件被加載好了，那么包含在這個(gè)函數(shù)中的代碼就會(huì)運(yùn)行. 
 
對(duì)IIFE語(yǔ)法更加仔細(xì)的觀察

你可以看到這個(gè)語(yǔ)法的最中心是一個(gè)函數(shù)?？匆幌逻@個(gè)代碼塊，我已經(jīng)將代碼分段并將一些行標(biāo)上了號(hào)，如此我們就可以探討它了.
 

( // 1.
  function() //2.
  { // 3.
   // 一行一行
   // 的
   // 代碼
  }() // 4.
); // 5.

首先，看看上面腳本的第2行。這一行通常看來(lái)就是一個(gè)匿名（也就是沒(méi)有命名）的函數(shù)聲明.  而后，第3一直到第4則是這個(gè)函數(shù)的主題部分。最后，第4行最后以一對(duì)括弧結(jié)束，這對(duì) 括弧會(huì)告訴JavaScript解釋器去調(diào)用這個(gè)函數(shù)。最終, 所有這些都會(huì)被包在一個(gè)不歸屬任何部分的括?。ǖ?和第5行）中, 而這對(duì)括弧會(huì)告訴解釋器要調(diào)用這個(gè)外部的匿名函數(shù)，它包含了我們所定義的函數(shù).

IIFE 可以帶上參數(shù)

這段奇怪的語(yǔ)法會(huì)在帶上參數(shù)之后，看起來(lái)會(huì)更加的奇怪.  它看起來(lái)會(huì)像是下面這樣
 

(function(thing1, thing2){
  // lines
  // of
  // code
}("in string", 382));

現(xiàn)在，你可以看到這個(gè)函數(shù)可以帶上兩個(gè)會(huì)被內(nèi)部的函數(shù)引用的thing1, thing2參數(shù).  被傳入值，在示例中是 "in string" 和 382.

現(xiàn)在我們理解了IIFE語(yǔ)法，讓我們來(lái)創(chuàng)建另外一個(gè)代碼示例，我們將運(yùn)行這段代碼來(lái)看看封裝是如何運(yùn)作的.
 

(function(){
  var isDoingWork = false;
  console.log("isDoingWork value : " + isDoingWork);
}());

自己動(dòng)手看看

為了看看是怎么運(yùn)行的，你可以做下面這幾步:

•     下載本文的源代碼.
•     在你的瀏覽器中打開(kāi) modulePattern3.htm.
•     打開(kāi)瀏覽器的開(kāi)發(fā)工具 -- F12(Chrome, IE) 或者 Ctrl-Shift-I (Opera) -- (這樣你就可以看到控制臺(tái)了)
•     你可以看到很像下面這樣圖片中所展示出來(lái)的東西

當(dāng)方法被調(diào)用時(shí) -- 這會(huì)在代碼被JavaScript解釋器加載支護(hù)立即發(fā)生 -- 而后函數(shù)會(huì)創(chuàng)建 isDoingWork 變量，并調(diào)用console.log()來(lái)在控制臺(tái)輸出這個(gè)變量的值.

現(xiàn)在，讓我們使用開(kāi)發(fā)工具中的控制臺(tái)來(lái)試試我們之前所嘗試過(guò)的步驟:

    輸入: isDoingWork然后回車(chē)<ENTER>

當(dāng)你這樣做了之后，你將會(huì)看到 瀏覽器不再相信isDoingWork這個(gè)值被定義過(guò)。即使是你嘗試從全局窗口對(duì)象中獲取這個(gè)值, 瀏覽器也不認(rèn)為 isDoingWork 這個(gè)值在此對(duì)象中被定義了.  你所看到的錯(cuò)誤消息看起來(lái)會(huì)像接下來(lái)這張圖片中所展示的這樣.

函數(shù)是一個(gè)對(duì)象：它創(chuàng)建了范圍

這是因?yàn)楝F(xiàn)在你已經(jīng)把isDoingWork這個(gè)變量創(chuàng)建在了一個(gè)函數(shù)里面 -- 也就是我們們的匿名 IIFE 中 -- 而如此這個(gè)變量就只能通過(guò)這個(gè)函數(shù)才能訪問(wèn)到.  有趣的是Javascript中的所有函數(shù)都是第一類(lèi)對(duì)象. 那很簡(jiǎn)明的意味著函數(shù)是一個(gè)對(duì)象，它可能通過(guò)一個(gè)變量被訪問(wèn)到.  或者說(shuō)，另外一種描述的方式是你存儲(chǔ)了指向 函數(shù)的一個(gè)引用，并在稍后的某個(gè)時(shí)間獲取其變量.

在我們第一個(gè)示例中，我們的問(wèn)題是并沒(méi)有保存一個(gè)指向我們匿名函數(shù)的引用，所以我們永遠(yuǎn)也不能再獲取到isDoingWork這個(gè)值。這就是我們下一個(gè)示例要改進(jìn)的地方.

函數(shù)是一個(gè)對(duì)象 : 使用this

因?yàn)槊恳粋€(gè)函數(shù)都是一個(gè)對(duì)象，所以每個(gè)函數(shù)都會(huì)有一個(gè)this變量，這個(gè)變量向開(kāi)發(fā)者提供了指向當(dāng)前對(duì)象的引用. 為了提供在從外部大我們的函數(shù)及其范圍的訪問(wèn)，我們可以返回這個(gè)this變量 -- 而它將會(huì)提供一個(gè)指向當(dāng)前對(duì)象的引用.

然后，除非我們將這個(gè)私有的isDoingWork變量添加到函數(shù)引用（this)上，我們也不能夠引用這個(gè)變量。為此我們要對(duì)之前的示例做一下輕微的改動(dòng)。它看起來(lái)會(huì)像下面這樣:
 

thing = (function(){ // 1.
  this.isDoingWork = false; // 2.
  console.log("isDoingWork value : " + isDoingWork);
  return this; // 3.
}());

你可以看到第一行我們加入了一個(gè)新的全局變量thing，它包含了從匿名函數(shù)返回的值。從示例代碼的開(kāi)頭跳到第三行，你可以看到我們返回了this變量。那就意味著我們返回了一個(gè)指向匿名函數(shù)的引用.

在第二行我們也已經(jīng)將isDoingWork加入了this引用中，那樣我們就可以使用語(yǔ)法thing.isDoingWork來(lái)從外部引用到這個(gè)值了.
自己動(dòng)手看看

為了看看的運(yùn)行，你可以做下面這幾步:

•     下載本文的示例代碼.
•     在你的瀏覽器中打開(kāi) modulePattern4.htm.
•     打開(kāi)瀏覽器開(kāi)發(fā)工具 -- F12(Chrome, IE) 或者 Ctrl-Shift-I (Opera) -- (那樣你就可以看到控制臺(tái)了)
•     你將會(huì)看到isDoingWork的值會(huì)輸出到控制臺(tái)，就像最開(kāi)始那個(gè)示例中你看到的那樣.
•     不過(guò)，現(xiàn)在你得輸入thing.isDoingWork才能或者這個(gè)值.

模塊模式總結(jié)

在最后這個(gè)示例中，變量值被成功的封裝了，而其他的JavaScript庫(kù)則可以明確的引用thing對(duì)象來(lái)獲取這個(gè)值.  好像不大可能，而這幫助了我們保持全局命名空間的干凈，并且在看起看來(lái)是更好的代碼組織形式. 這也使得我們代碼的維護(hù)更容易.
最終，我們用上了 AngularJS

因?yàn)槭褂媚K模式是一個(gè)最佳實(shí)踐，AngularJS的開(kāi)發(fā)者就將一個(gè)模塊系統(tǒng)構(gòu)建到了庫(kù)中.
Plunker 代碼

首先你可以通過(guò)到這個(gè)Plunker上 (http://plnkr.co/edit/js8rbKpIuAuePzLF2DcP?p=preview - 在一個(gè)新的窗口或Tab頁(yè)打開(kāi))獲取整個(gè)AngularJS示例.

而我們?cè)谶@里展示出代碼，那樣我們就可以更方便的談?wù)撍?

首先，讓我們看看這個(gè) HTML. 

<!DOCTYPE html>
<html ng-app="mainApp">
 
 <head>
  <meta charset="utf-8" />
  <title>Angular Module Example</title>
  <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.20/angular.js" data-semver="1.2.20"></script>
  <script src="mainCtrl.js"></script>
  <script src="secondCtrl.js"></script>
 </head>
 
 <body>
  <div ng-controller="MainCtrl as mc">
   <p>mc refers to MainCtrl which has 
   been added to the angular app module</p>
   <p>Hello {{mc.name}}!</p>
   <ol><li ng-repeat="a in mc.allThings">{{a}}</li></ol>
  </div>
  <div ng-controller="SecondCtrl as sc">
   <p>
    Hello {{sc.name}}
   </p>
   <ol><li ng-repeat="a in sc.allThings">{{a}}</li></ol>
  </div>
 </body>
 
</html>

Angular 指令 : ng-app

Angular 所定義和使用的東西叫做指令。這些指令基本上就是由Angular定義屬性，而AngularJS編譯器（Angular的JavaScript）會(huì)將它們轉(zhuǎn)換成其他的東西.

我們應(yīng)用了ng-app指令，為我們的Angular應(yīng)用定義了一個(gè)名稱(chēng)，叫做mainApp.

mainApp 就是我們稍后會(huì)看到的模塊模式的起點(diǎn). 
被引入的腳本 : 每個(gè)都是一個(gè)模塊

現(xiàn)在，請(qǐng)注意有三個(gè)腳本被引入到了這個(gè)HTML中.

第一個(gè)是必須的AngularJS庫(kù).

而其他兩個(gè)則是作為模塊被實(shí)現(xiàn)的Angular控制器.

它們被作為模塊實(shí)現(xiàn)以保持代碼彼此，還有從這個(gè)應(yīng)用上看，都是獨(dú)立的.

AngularJS : 創(chuàng)建 score

在往下看，你將會(huì)看到兩個(gè)以如下代碼開(kāi)頭的div:
 

<div ng-controller="MainCtrl as mc">
 
<div ng-controller="SecondCtrl as sc">

這是在為div的每一個(gè)都設(shè)置上ng-controller.  這些div中的每一個(gè)都有其各自的范圍.  第一個(gè)控制器的名字叫做 MainCtrl，第二個(gè)叫做 SecondCtrl.

 AngularJS 編譯器會(huì)在你提供（引入）的代碼中用這兩個(gè)名稱(chēng)查找對(duì)應(yīng)的函數(shù).

如果AngularJS編譯器沒(méi)有找個(gè)這兩個(gè)名稱(chēng)對(duì)應(yīng)的函數(shù)，它就會(huì)拋出一個(gè)錯(cuò)誤.

mainCtrl.js : 第一個(gè)控制器

讓我們來(lái)看看mainCtrl.js文件里面有些啥東西.

你可以在Plunker頁(yè)面的左側(cè)點(diǎn)擊它在Plunker中將其打開(kāi).

當(dāng)你打開(kāi)了它，你將會(huì)看到一些看上去很熟悉的代碼。好吧，你至少會(huì)看出來(lái)它們都是被包在一個(gè)IIFE中的.
 

(function() {
 
 var app = angular.module('mainApp', []);
 
 app.controller('MainCtrl', function() {
  console.log("in MainCtrl...");
  // vt = virtual this - just shorthand
  vt = this;
  vt.name = 'MainCtrl';
  vt.allThings = ["first", "second", "third"];
 
 });
})();

那是因?yàn)槲覀冃枰@些代碼在文件mainCtrl.js被加載時(shí)就運(yùn)行.

現(xiàn)在，請(qǐng)注意在這個(gè)IIFE中的第一行代碼.
 

var app = angular.module('mainApp', []);

這行代碼是Angular將一個(gè)模塊添加到其命名空間的方式.  在這里，我們添加了一個(gè)將用來(lái)展示我們應(yīng)用程序的模塊.  這是應(yīng)用程序的模塊，而我們已經(jīng)將其命名為 itmainApp, 它跟HTML頁(yè)面上ng-app所指定的值是一樣的.

我們也創(chuàng)建了一個(gè)叫做app的（只在IIFE本地可見(jiàn)的）本地變量，以便我們將可以在這個(gè)函數(shù)內(nèi)部用來(lái)再次添加一個(gè)控制器. 

奇怪的 Angular 語(yǔ)法

請(qǐng)你也要再仔細(xì)看看第一行。你會(huì)注意到我們是首次創(chuàng)建mainApp模塊，而如果是首次，則我們必須提供以字符串?dāng)?shù)組的形式提供其可能需要的任何依賴(lài)(，表示出依賴(lài)庫(kù)的名稱(chēng)). 不過(guò)，在這里對(duì)于這個(gè)簡(jiǎn)單的示例而言，我們不需要任何的依賴(lài)。但Angular仍然需要我們傳入一個(gè)空的數(shù)組，以便它知曉我們正在創(chuàng)建新的模塊，而不是去試圖加載一個(gè)已經(jīng)被創(chuàng)建好了的模塊.

提示: 你將會(huì)看到我們會(huì)在secondCtrl.js里加載mainApp模塊，而上面所提的數(shù)組將會(huì)有更多的作用.

我們一把mainApp創(chuàng)建好，就需要向其添加我們的控制器. 這些就是Angular預(yù)期我們?cè)贖TML（的div中）加入的控制器.
 
將控制器添加到App模塊

添加控制器的代碼看起來(lái)像下面這樣:
 

app.controller('MainCtrl', function() {
  console.log("in MainCtrl...");
  // vt = virtual this - just shorthand
  vt = this;
  vt.name = 'MainCtrl';
  vt.allThings = ["first", "second", "third"];
 
 });

為了添加我們的控制器函數(shù)，我們向app.controller()函數(shù)提供了一個(gè)控制器名稱(chēng)和一個(gè)函數(shù). 在此處我們提供了一個(gè)匿名函數(shù).

所以，我們的控制器主體代碼就是下面這幾行了:
 

console.log("in MainCtrl...");
  // vt = virtual this - just shorthand
  vt = this;
  vt.name = 'MainCtrl';
  vt.allThings = ["first", "second", "third"];

這里，當(dāng)我們的控制器運(yùn)行時(shí)，會(huì)向控制臺(tái)輸出一行.  然后，我們將this變量重命名為vt（方便起見(jiàn)，就叫他虛擬的this) ，而后我天為其添加了一個(gè)name屬性和一個(gè)叫做allThings 的字符串?dāng)?shù)組.

控制器和封裝

那就是當(dāng)控制器被Angular調(diào)用時(shí)會(huì)運(yùn)行的代碼. 那個(gè)控制器會(huì)在文件被加載時(shí)運(yùn)行起來(lái)，也就是一開(kāi)始HTML被加載的時(shí)候. 這意味著控制器會(huì)被加載到app模塊中，而這些屬性會(huì)被添加到控制器對(duì)象（函數(shù)）中。因?yàn)槲覀兿雝his變量添加了屬性，我們就可以在稍后獲取這些屬性，但它們是被封裝了起來(lái)的，因此它們不可以被每個(gè)人隨意的更改.

現(xiàn)在，讓我們跳到HTML中控制器被引用和使用的地方.
第一個(gè)Div

這是我們的MainCtrl控制器被引用和使用的第一個(gè)Div。它看起來(lái)就像下面這樣:
 

<div ng-controller="MainCtrl as mc">
  <p>mc refers to MainCtrl which has 
  been added to the angular app module</p>
  <p>Hello {{mc.name}}!</p>
  <ol><li ng-repeat="a in mc.allThings">{{a}}</li></ol>
 </div>

這個(gè)div輸出我們的web頁(yè)面的如下部分，看起來(lái)就是接下來(lái)這張圖片上所展示的那樣.

輸出被使用Angular指令來(lái)創(chuàng)建

不過(guò)，它使用了一種特殊的方式創(chuàng)建那個(gè)輸出，它使用了兩種Angular指令:

  {{mc.name}}

  ng-repeat

第一個(gè)指令被關(guān)聯(lián)到了Div那一行上面MainCtrl的聲明和引用.  我們告訴Angular，說(shuō)我們想以mc這個(gè)名稱(chēng)引用我們的MainCtrl函數(shù)（對(duì)象）。那就是Angular提供的一個(gè)很棒的縮寫(xiě)功能.

現(xiàn)在，因?yàn)槲覀儗⒁粋€(gè)屬性放到了MainCtrl的this對(duì)象上，我們現(xiàn)在就可以通過(guò)mc和屬性的名稱(chēng)來(lái)引用那些東西了。我們將那些東西包含特殊的雙大括號(hào){{ }}里面，如此Angular編譯器就懂得那是可以運(yùn)行的代碼，你就會(huì)瞧見(jiàn)Angular將其轉(zhuǎn)換成了HTML:

 
<p>Hello {{mc.name}}!</p>

編程了下面這一:

Hello MainCtrl!

之后，我們?cè)O(shè)置了一個(gè)漂亮的無(wú)需列表，并使用了ng-repeat指令來(lái)迭代輸出數(shù)組中的每一行.

然后Angular跌倒了整個(gè)allThings數(shù)組，并將其裝換成了下面的HTML
 

<li ng-repeat="a in mc.allThings">{{a}}</li>

變成了如下的輸出

1. first
2. second
3. third

就那么簡(jiǎn)單。這就是模塊化的所有東西，我們的值再也不會(huì)被任何人動(dòng)手動(dòng)腳了.

SecondCtrl : 幾乎就是同樣的東西

這里有SecondCtrl的代碼. 代碼機(jī)會(huì)就是一樣的，除了我們獲取我滿(mǎn)原來(lái)的app模塊處有點(diǎn)不一樣——不是第一次創(chuàng)建它了.
 

(function() {
 
 var app = angular.module('mainApp');
 
 app.controller('SecondCtrl', function() {
  console.log("in SecondCtrl...");
  // vt = virtual this - just shorthand
  vt = this;
  vt.name = 'SecondCtrl';
  vt.allThings = ["bacon", "lettuce", "tomato"];
 
 });
})();

仔細(xì)看看下面這一行:
 

var app = angular.module('mainApp');

唯一的不同就是我們沒(méi)有提供引用數(shù)組.

那是因?yàn)閙ainApp已經(jīng)是存在了的，而我們只是想向其添加另外一個(gè)新模塊 (SecondCtrl) .
總結(jié)：最佳實(shí)踐

所有其它的腳本中的代碼，以及HTML基本上是一樣的,而此處最重要的是所有的代碼都被模塊化了，數(shù)據(jù)也被封裝了起來(lái)，以便更好的組織我們的代碼. 這是Google軟件開(kāi)發(fā)者遵循的一個(gè)最佳實(shí)踐，也是我們應(yīng)該遵循的。請(qǐng)學(xué)習(xí)他，運(yùn)用它，并與它同在吧（阿門(mén)）. 

最新評(píng)論