AngularJS開發指南16：AngularJS構建大型Web應用詳解

標籤：

AngularJS是由Google建立的一種JS架構，使用它可以擴充應用程式中的HTML功能，從而在web應用程式中使用HTML聲明動態內容。在該團隊工作的軟體工程師Brian Ford近日撰寫了一篇blog，分享了如何使用AngularJS構建大型Web應用的經驗。這些經驗對於使用其他JS架構構建大型應用的開發人員也極具借鑒意義。

這篇blog特別關注的是大型應用程式，作者首先給出的建議是，盡量不要讓應用變得太巨大。而應該編寫小型、功能專註的、模組化的部分，然後逐漸把它們組合起來，變得越來越大，從而構成你的應用。

接下來，Brian Ford首先講述了如何組織應用的結構，然後對效能、測試、工具、伺服器和構建過程做了簡要的總結。

在應用的組織圖方面，Brian Ford針對各個方面給出如下建議：

目錄：建議在根目錄中只放置index.html一個檔案，然後根據需要建立scripts、styles、views等目錄，在scripts目錄下，首先會存放app.js檔案，然後在這個目錄下又可以建立多個子目錄，如：controllers、directives、filters、services、vendor等，在其中分類地存放不同的內容。並且，隨著你為應用建立更多內容，也許會增加更多子目錄來存放各種檔案。

檔案：每個檔案中應該只有一件事物，這件事物可能會是控制項、指令、過濾器或者服務等等。這會產生比較小但更專註的檔案。也有利於更好地進行測試。

模組：首先在app.js中定義和配置所有模組，如：

angular.module(‘yourAppName‘, [‘yourAppDep‘]);angular.module(‘yourAppDep‘);

然後在模組中定義控制項、服務等，如：

angular.module(‘yourAppDep‘).controller(‘MyCtrl‘, function () {      // ...});

依賴關係：一般來說，服務、控制項、指令等應該擁有儘可能少的依賴關係，這是非常好的軟體開發實踐，會有助於測試。API應該分層。控制項尤其不能綜合多種不同層級的抽象。

指令：對指令使用app專用的首碼，這有助於避免與第三方的組件重名。例如下面的代碼中就用“btla”作為首碼：

angular.module(‘yourAppDep‘).directive(‘btlaControlPanel‘, function () {     // ...});

服務：你可以使用下面的方式聲明服務：

angular.module(‘yourAppDep‘).service(‘MyCtrl‘, function () {     // ...});

模型：AngularJS作為JavaScript架構，其獨到之處就在於讓你可以完全掌控模型層。這是AngularJS的強大之處，因為應用程式的核心是你的資料，而各種應用之間的資料又有很大區別。所以Brian Ford強烈建議要仔細考慮如何使用資料，以及將會如何儲存資料。

控制器：建議控制器以“Ctrl”開頭，如：

angular.module(‘yourAppDep‘).controller(‘MyCtrl‘, function () {     // ...});

除了上述內容，Brian Ford還在文章中針對效能、測試等方面給出了各種建議：

在效能方面，AngularJS應用一般會非常非常快。大多數應用不需要做任何特殊的最佳化，因此，除非你發現嚴重的效能問題，否則就應該把時間花在其他方面來改善應用。

對於大型項目來說，測試非常重要。它讓你可以自信地進行重構，而這對於保持大型項目代碼整潔非常重要。大型應用應該既擁有單元測試，也要擁有端到端（end-to-end）測試。單元測試有助於定位問題，而端到端的測試能夠確保整個應用像期望的那樣工作。每個控制器、服務、過濾器和指令都應該擁有一系列單元測試。而應用的每個特性都應該擁有端到端的測試。

在工具方面，首先推薦使用Yeoman，從而獲得最佳實務和很好的項目結構，另外還有AngularJS Batarang，它對於調試和找到效能瓶頸會很有效。

在伺服器方面，你可以使用任何想要的伺服器和AngularJS協作。它只是用戶端的程式庫。我的推薦和喜歡的設定是使用Node.js加nginx。我使用nginx存放靜態檔案，使用Node.js建立RESTful的API和嵌入的（socketed）應用。對於雲供應商，我曾經成功使用過Nodejitsu 和Linode。前者會讓你更容易地部署程式，你不需要關心伺服器的環境。如果你需要對伺服器環境有更多控制，那麼Linode會讓你從底層控制虛擬機器。Linode還提供了很好的API，可以用來管理虛擬機器。

構建過程方面，我認為Angular還需要做更多改進，我在2013年最大的目標就是要對此有所貢獻。我已經發布了ngmin，希望這個工具可以最終解決為生產環境最小化AngularJS應用的問題。

最後，Brian Ford做出結論：AngularJS是一種非常適合編寫大型應用的JS架構。你可以直接拿來使用，它很快，並且會對組織應用的結構很有協助。

談談如何開始使用AngularJS構建Web應用

AngularJS的理念與JQuery庫或其他前端JS架構是不一樣的，AngularJS的目標是開發Web應用程式。比如使用jsGen搭建的AngularJS中文社區，一般觀眾會以為這隻是一個普通網站，但實際上它是一個運行在瀏覽器中的應用程式。當瀏覽器訪問網站時，伺服器先反饋一個AngularJS應用的引導頁jsgen/static/index.html，該頁包含了構建完整AngularJS應用的html、css、js等資源路徑，瀏覽器再依照這些資源路徑從伺服器擷取相關資源，構成完整的AngularJS應用。一旦AngularJS應用載入完畢，它就會從網站讀取網站資訊、文章等資料，或根據使用者的請求擷取相關資料，將資料插入到AngularJS應用相關位置，並渲染成使用者最終看到的網頁。組成AngularJS應用的html、css、js等資源都是靜態檔案，我們可以把這些靜態檔案獨立出來（即jsgen/static目錄下的檔案），將資料資源相對路徑改成伺服器的絕對路徑，打包放在本地電腦，那麼這個本地AngularJS應用依然是可以在瀏覽器中運行，並與伺服器通訊擷取資料的完整AngularJS應用。說了這麼多，只為告訴你一點：AngularJS應用是一個Web程式，而不是從伺服器擷取的一個一個網頁。

AngularJS的四大功能幫你構建Web應用程式：

1. UI視圖路由導航

   該功能幫你從一個視圖切換到另一個視圖，或者在視圖中的局部地區切換。在網頁中即表現為從一個網頁進入到另一個網頁，或者一個網頁地區更新。實現該功能的指令有ng-view、ng-include、ng-switch、ng-show/hide等。

2. 資料模型雙向繫結

   該功能幫你及時更新視圖中的資料，或者當你在視圖中輸入了資料，該資料會立即更新到AngularJS應用的邏輯程式（即JS程式）中。實現該功能的指令有ng-bind、ng-template等，或者最直接最常用的{{}}。而實現雙向繫結的基礎是範圍！

3. 與遠程伺服器雙向通訊

   該功能幫你向伺服器請求資料或者發送資料。實現該功能的服務是$http和$resource。

4. 模組化管理

   該功能幫你進行模組化編程，從而實現大型、複雜的Web應用。當然，簡單的AngularJS應用也應該使用模組化編程管理，這是一個好習慣。實現該功能的是angular.module，angular.module可以說是AngularJS的基礎，所有指令、服務、過濾器、控制器均由它派生。

angular開發指南差不多就這樣結束了，接下來，將用angular源碼來講解angular的一些機制是如何?的，等大家瞭解了源碼之後，就能很輕鬆的使用angular進行開發了。

 

 

加油！

AngularJS開發指南16：AngularJS構建大型Web應用詳解