使用AngularJS構建大型Web應用

AngularJS是由Google建立的一種JS框架，使用它能夠擴展應用程序中的HTML詞彙，從而在web應用程序中使用HTML聲明動態內容。在該團隊工做的軟件工程師Brian Ford近日撰寫了一篇blog，分享瞭如何使用AngularJS構建大型Web應用的經驗。這些經驗對於使用其餘JS框架構建大型應用的開發者也極具借鑑意義。

AngularJS的官方網站上給出了這個框架的基本使用方法，如：

• 如何引入AugularJS，從而讓你的web應用使用該框架
• 如何添加控件，並對其進行數據綁定
• 如何進行表單驗證
• 如何與服務器通訊
• 如何建立可重用的組件
• 如何對組件進行本地化
• 如何讓應用可嵌入、可注入和可測試
• 另外，網站上還給出了一系列教程，跟隨這些內容，咱們能夠從深刻淺出地逐漸對AngularJS的各類特性和用法有很好的瞭解，進而很好地開始使用這一框架。

可是，正如Brian Ford所說，官方文檔中並無告訴開發者，當應用逐漸增加，其中包含上萬甚至幾十萬行代碼的時候，應該如何組織和管理它，而他的blog正是對這些內容以及最佳實踐的總結。

這篇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框架。你能夠直接拿來使用，它很快，而且會對組織應用的結構頗有幫助。

你是否構建過大型的Web應用，是否也曾經使用過AngularJS框架，歡迎你們分享和討論。