本文將介紹如何把AngularJs應用到實際項目中。本篇文章將使用AngularJS來打造壹個簡易的權限管理系統。下面不多說，直接進入主題。
二、整體架構設計介紹
首先看下整個項目的架構設計圖：
從上圖可以看出整個項目的壹個整體結構，接下來，我來詳細介紹了項目的整體架構：
采用Asp.net Web API來實現REST 服務。這樣的實現方式，已達到後端服務的公用、分別部署和更好地擴展。Web層依賴應用服務接口，並且使用Castle Windsor實現依賴註入。
顯示層(用戶UI)
顯示層采用了AngularJS來實現的SPA頁面。所有的頁面數據都是異步加載和局部刷新，這樣的實現將會有更好的用戶體驗。
應用層(Application Service)
AngularJS通過Http服務去請求Web API來獲得數據，而Web API的實現則是調用應用層來請求數據。
基礎架構層
基礎架構層包括倉儲的實現和壹些公用方法的實現。
倉儲層的實現采用EF Code First的方式來實現的，並使用EF Migration的方式來創建數據庫和更新數據庫。
LH.Common層實現了壹些公用的方法，如日誌幫助類、表達式樹擴展等類的實現。
領域層
領域層主要實現了該項目的所有領域模型，其中包括領域模型的實現和倉儲接口的定義。
介紹完整體結構外，接下來將分別介紹該項目的後端服務實現和Web前端的實現。
三、後端服務實現
後端服務主要采用Asp.net Web API來實現後端服務，並且采用Castle Windsor來完成依賴註入。
這裏拿權限管理中的用戶管理來介紹Rest Web API服務的實現。
提供用戶數據的REST服務的實現：
從上面代碼實現可以看出，User REST 服務依賴與IUserService接口，並且也沒有像傳統的方式將所有的業務邏輯放在Web API實現中，而是將具體的壹些業務實現封裝到對應的應用層中，Rest API只負責調用對應的應用層中的服務。這樣設計好處有：
REST 服務部依賴與應用層接口，使得職責分離，將應用層服務的實例化交給單獨的依賴註入容器去完成，而REST服務只負責調用對應應用服務的方法來獲取數據。采用依賴接口而不依賴與具體類的實現，使得類與類之間低耦合。REST服務內不包括具體的業務邏輯實現。這樣的設計可以使得服務更好地分離，如果妳後期想用WCF來實現REST服務的，這樣就不需要重復在WCF的REST服務類中重復寫壹篇Web API中的邏輯了，這時候完全可以調用應用服務的接口方法來實現WCF REST服務。所以將業務邏輯實現抽到應用服務層去實現，這樣的設計將使得REST 服務職責更加單壹，REST服務實現更容易擴展。
用戶應用服務的實現：
這裏應用服務層其實還可以進壹步的優化，實現代碼層級的讀寫分離，定義IReadOnlyService接口和IWriteServie接口，並且把寫操作可以采用泛型方法的方式抽象到BaseService中去實現。這樣壹些增刪改操作實現公用，之所以可以將這裏操作實現公用，是因為這些操作都是非常類似的，無非是操作的實體不壹樣罷了。其實這樣的實現在我另壹個開源項目中已經用到：OnlineStore.大家可以參考這個自行去實現。
倉儲層的實現：
用戶應用服務也沒有直接依賴與具體的倉儲類，同樣也是依賴其接口。對應的用戶倉儲類的實現如下：
四、AngularJS前端實現
Web前端的實現就是采用AngularJS來實現，並且采用模塊化開發模式。具體Web前端的代碼結構如下圖所示：
使用AngularJS開發的Web應用程序的代碼之間的調用層次和後端基本壹致，也是視圖頁面——》控制器模塊——》服務模塊——》Web API服務。
並且Web前端CSS和JS資源的加載采用了Bundle的方式來減少請求資源的次數，從而加快頁面加載時間。具體Bundle類的配置：
首頁 Index.cshtml
五、運行效果
介紹完前後端的實現之後，接下來讓我們看下整個項目的運行效果：
六、總結
到此，本文的所有內容都介紹完了，盡管本文的AngularJS的應用項目還有很多完善的地方，例如沒有緩沖的支持、沒有實現讀寫分離，沒有對壹些API進行壓力測試等。但AngularJS在實際項目中的應用基本是這樣的，大家如果在項目中有需要用到AngularJS，正好妳們公司的後臺又是.NET的話，相信本文的分享可以是壹個很好的參考。另外，關於架構的設計也可以參考我的另壹個開源項目：OnlineStore和FastWorks。