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-viewng-includeng-switchng-show/hide等。

  2. 數據模型雙向綁定

    該功能幫你及時更新視圖中的數據,或者當你在視圖中輸入了數據,該數據會立即更新到AngularJS應用的邏輯程序(即JS程序)中。實現該功能的指令有ng-bindng-template等,或者最直接最常用的{{}}。而實現雙向綁定的基礎是作用域!

  3. 與遠程服務器雙向通信

    該功能幫你向服務器請求數據或者發送數據。實現該功能的服務是$http$resource

  4. 模塊化管理

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

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

 

 

加油!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM