日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
AngularJS——使用模塊組織你的代碼

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

站在用戶的角度思考問題，與客戶深入溝通，找到周寧網(wǎng)站設(shè)計(jì)與周寧網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋周寧地區(qū)。

介紹

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

背景

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

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

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

下面就是我所說的意思.

JavaScript 默認(rèn)的全局問題

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

 
 
    
  
  
  1.  
    2.

范圍?

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

把它設(shè)置到Action中
 

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

  1. 下載本文的代碼樣例.

  2. 在你的瀏覽器中打開 modulePattern.htm .

  3. 打開瀏覽器開發(fā)工具 -- F12(Chrome, IE) or Ctrl-Shift-I (Opera) -- (那樣就可以看見控制臺(tái)了)

  4. 在瀏覽器工具控制臺(tái)下，輸入: isDoingWork，然后回車

  5. 你會(huì)看到輸出的值為false. 

  6. 現(xiàn)在輸入 : isDoingWork = true，然后回車

  7. 如此下載的值就為true了. 你已經(jīng)改變了這個(gè)值.

  8. 你可以看到這個(gè)值已經(jīng)通過輸入doingwindow.isDoingWork = true然后回車，被添加到了全局窗口對(duì)象之中. 

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

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

 
 
    
  
  
  1.  
    2.

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

 
 
    
  
  
  1. var isDoingWork = false;  
    2. 
  
  
  2.    
    3. 
  
  
  3. setInterval(function(){isDoingWork = !isDoingWork;}, 3000); 
    4.

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

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

自己動(dòng)手看看

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

  1. 下載本文的樣例代碼.

  2. 在你的瀏覽器中打開 modulePattern2.htm .

  3. 打開瀏覽器開發(fā)工具 -- F12(Chrome, IE) 或者 Ctrl-Shift-I (Opera) -- (這樣你就可以看到控制臺(tái)了)

  4. 在瀏覽器開發(fā)工具的控制臺(tái)下，輸入 : isDoingWork 然后回車

  5. 將第4步多重復(fù)幾次，你將會(huì)發(fā)現(xiàn)isDoingWork的值會(huì)每個(gè)大約3秒鐘變化一次.

那這是不是很棒呢?

我的***個(gè)觀點(diǎn) : 模塊模式是很有用的

我需要為此做出解釋，為了要向你展示為什么 JavaScript 的模塊模式是很有用的.  我得想你展示 JavaScript 的模塊模式，那樣我就可以告訴你它是如何在AngularJS中被使用或?qū)崿F(xiàn)的了. 

模塊模式：封裝

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

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

 
 
    
  
  
  1. public class Animal  
    2. 
  
  
  2.    
    3. 
  
  
  3. {  
    4. 
  
  
  4.      // constructor allows user to set the commonName  
    5. 
  
  
  5.      public animal(string name)  
    6. 
  
  
  6.      {  
    7. 
  
  
  7.         this.commonName = name;  
    8. 
  
  
  8.      }  
    9. 
  
  
  9.      // making commonName private hides (encapsulates) it in the class  
    10. 
  
  
  10.      private string commonName;  
    11. 
  
  
  11.      //explicitly exposing the value for reading only  
    12. 
  
  
  12.      public string CommonName  get { return this.commonName    }  
    13. 
  
  
  13. } 
    14.

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

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

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

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

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

 
 
    
  
  
  1. (function(){  
    2. 
  
  
  2.    // lines  
    3. 
  
  
  3.    // of  
    4. 
  
  
  4.    // code  
    5. 
  
  
  5. }()); 
    6.

如果你從來沒有看到過像這樣的東西，那你就有點(diǎn)說不過去了.

立即被調(diào)用

首先，這個(gè)名稱的***部分叫做立即被調(diào)用的原因是，一般包含這個(gè)特殊函數(shù)的源文件被加載好了，那么包含在這個(gè)函數(shù)中的代碼就會(huì)運(yùn)行. 

對(duì)IIFE語法更加仔細(xì)的觀察

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

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

首先，看看上面腳本的第2行。這一行通?？磥砭褪且粋€(gè)匿名（也就是沒有命名）的函數(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ù)

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

 
 
    
  
  
  1. (function(thing1, thing2){  
    2. 
  
  
  2.    // lines  
    3. 
  
  
  3.    // of  
    4. 
  
  
  4.    // code  
    5. 
  
  
  5. }("in string", 382)); 
    6.

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

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

 
 
    
  
  
  1. (function(){  
    2. 
  
  
  2.    var isDoingWork = false;  
    3. 
  
  
  3.    console.log("isDoingWork value : " + isDoingWork);  
    4. 
  
  
  4. }()); 
    5.

自己動(dòng)手看看
 

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

  1. 下載本文的源代碼.

  2. 在你的瀏覽器中打開 modulePattern3.htm.

  3. 打開瀏覽器的開發(fā)工具 -- F12(Chrome, IE) 或者 Ctrl-Shift-I (Opera) -- (這樣你就可以看到控制臺(tái)了)

  4. 你可以看到很像下面這樣圖片中所展示出來的東西

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

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

  1. 輸入: isDoingWork然后回車

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

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

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

在我們***個(gè)示例中，我們的問題是并沒有保存一個(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è)變量向開發(fā)者提供了指向當(dāng)前對(duì)象的引用. 為了提供在從外部大我們的函數(shù)及其范圍的訪問，我們可以返回這個(gè)this變量 -- 而它將會(huì)提供一個(gè)指向當(dāng)前對(duì)象的引用.

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

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

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

在第二行我們也已經(jīng)將isDoingWork加入了this引用中，那樣我們就可以使用語法thing.isDoingWork來從外部引用到這個(gè)值了.

自己動(dòng)手看看

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

  1. 下載本文的示例代碼.

  2. 在你的瀏覽器中打開 modulePattern4.htm.

  3. 打開瀏覽器開發(fā)工具 -- F12(Chrome, IE) 或者 Ctrl-Shift-I (Opera) -- (那樣你就可以看到控制臺(tái)了)

  4. 你將會(huì)看到isDoingWork的值會(huì)輸出到控制臺(tái)，就像最開始那個(gè)示例中你看到的那樣.

  5. 不過，現(xiàn)在你得輸入thing.isDoingWork才能或者這個(gè)值. 

模塊模式總結(jié)
 

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

#p#

最終，我們用上了 AngularJS

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

Plunker 代碼

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

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

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

 
 
    
  
  
  1.  
    2. 
  
  
  2.  
    3. 
  
  
  3.    
    4. 
  
  
  4.    
    5. 
  
  
  5.      
    6. 
  
  
  6.     Angular Module Example 
    7. 
  
  
  7.      
    8. 
  
  
  8.      
    9. 
  
  
  9.      
    10. 
  
  
  10.    
    11. 
  
  
  11.    
    12. 
  
  
  12.    
    13. 
  
  
  13.      
    14. 
  
  
  14.       
    mc refers to MainCtrl which has   
    15. 
  
  
  15.       been added to the angular app module
     
    16. 
  
  
  16.       
    Hello {{mc.name}}!
     
    17. 
  
  
  17.       
      {{a}}
     
    18. 
  
  
  18.     
 
  •      
  •       

     

  •         Hello {{sc.name}}  
  •       

     
  •       
      {{a}}
     
  •     
    •  
  •    
  •    
  •  

    • Angular 指令 : ng-app
     

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

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

    mainApp 就是我們稍后會(huì)看到的模塊模式的起點(diǎn).  

    被引入的腳本 : 每個(gè)都是一個(gè)模塊

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

    ***個(gè)是必須的AngularJS庫.

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

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

    AngularJS : 創(chuàng)建 score
     

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

     
 
      
  
  
    1.  
      2. 
 
 
     
 
      
  
  
    1.  
      2.

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

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

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

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

    讓我們來看看mainCtrl.js文件里面有些啥東西.

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

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

     
 
      
  
  
    1. (function() {  
      2. 
  
  
    2.    
      3. 
  
  
    3.   var app = angular.module('mainApp', []);  
      4. 
  
  
    4.    
      5. 
  
  
    5.   app.controller('MainCtrl', function() {  
      6. 
  
  
    6.     console.log("in MainCtrl...");  
      7. 
  
  
    7.     // vt = virtual this - just shorthand  
      8. 
  
  
    8.     vt = this;  
      9. 
  
  
    9.     vt.name = 'MainCtrl';  
      10. 
  
  
    10.     vt.allThings = ["first", "second", "third"];  
      11. 
  
  
    11.    
      12. 
  
  
    12.   });  
      13. 
  
  
    13. })(); 
      14.

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

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

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

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

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

    奇怪的 Angular 語法

    請(qǐng)你也要再仔細(xì)看看***行。你會(huì)注意到我們是***創(chuàng)建mainApp模塊，而如果是***，則我們必須提供以字符串?dāng)?shù)組的形式提供其可能需要的任何依賴(，表示出依賴庫的名稱). 不過，在這里對(duì)于這個(gè)簡單的示例而言，我們不需要任何的依賴。但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模塊

    添加控制器的代碼看起來像下面這樣:

     
 
      
  
  
    1. app.controller('MainCtrl', function() {  
      2. 
  
  
    2.     console.log("in MainCtrl...");  
      3. 
  
  
    3.     // vt = virtual this - just shorthand  
      4. 
  
  
    4.     vt = this;  
      5. 
  
  
    5.     vt.name = 'MainCtrl';  
      6. 
  
  
    6.     vt.allThings = ["first", "second", "third"];  
      7. 
  
  
    7.    
      8. 
  
  
    8.   }); 
      9.

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

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

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

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

    控制器和封裝

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

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

    ***個(gè)Div

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

     
 
      
  
  
    1.  
      2. 
  
  
    2.     
      mc refers to MainCtrl which has   
      3. 
  
  
    3.     been added to the angular app module
       
      4. 
  
  
    4.     
      Hello {{mc.name}}!
       
      5. 
  
  
    5.     
        {{a}}
       
      6. 
  
  
    6.  
     

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

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

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

    1. {{mc.name}}

    2. ng-repeat

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

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

     
 
      
  
  
    1. Hello {{mc.name}}!
       
      2.

    編程了下面這一:

    Hello MainCtrl!

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

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

     
 
      
  
  
    1. {{a}}
      2.  

    變成了如下的輸出

    1. first
    2. second
    3. third

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

    SecondCtrl : 幾乎就是同樣的東西

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

     
 
      
  
  
    1. (function() {  
      2. 
  
  
    2.    
      3. 
  
  
    3.   var app = angular.module('mainApp');  
      4. 
  
  
    4.    
      5. 
  
  
    5.   app.controller('SecondCtrl', function() {  
      6. 
  
  
    6.     console.log("in SecondCtrl...");  
      7. 
  
  
    7.     // vt = virtual this - just shorthand  
      8. 
  
  
    8.     vt = this;  
      9. 
  
  
    9.     vt.name = 'SecondCtrl';  
      10. 
  
  
    10.     vt.allThings = ["bacon", "lettuce", "tomato"];  
      11. 
  
  
    11.    
      12. 
  
  
    12.   });  
      13. 
  
  
    13. })(); 
      14.

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

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

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

    那是因?yàn)閙ainApp已經(jīng)是存在了的，而我們只是想向其添加另外一個(gè)新模塊 (SecondCtrl) .

    總結(jié)：***實(shí)踐

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

    英文：AngularJS: Organizing Your Code With Modules

    譯文：http://www.oschina.net/translate/angularjs-organizing-your-code-with-modules


    本文題目：AngularJS——使用模塊組織你的代碼
    當(dāng)前URL：http://m.5511xx.com/article/dpgiisg.html