第八章 前端框架

源代碼GitHub:https://github.com/ZhaoRd/Zrd_0001_AuthorityManagement

1、介紹

       本Demo主要使用的前端框架有 bootstrap、angularjs、angle。bootstrap是推特公司的開源css框架，提供優美的界面元素;angularjs是google推出的前端js框架，最爲核心的是：MVVM、模塊化、雙向數據綁定、依賴注入等等;angle是一個前端admin的管理框架，包括了諸多組件的使用方式,具備Angular/html/Music SAP等多個版本。

       本章主要介紹angle的前端框架。

2、angularjs路由結合mvc路由

    angularjs做爲前端的mvc框架，也用路由的概念，具體的不在本文闡述。本demo使用mvc做用後臺程序，那麼怎麼結合angularjs的路由和mvc裏的路由呢？

        前端使用angualrjsUI提供的路由功能，具體的代碼以下

先定了app的頁面，這裏是默認的，訪問mvc設置的默認首頁，查看默認的代碼爲

默認方位的路徑是： /App/Index,該頁代碼以下

這裏定義了整個佈局的方式，包括了頭部、左部、和底部等幾大塊，右邊留空，定意div  指定 ui-view便可

這樣，在具體的子頁面，只要指定Layout=null便可使用app/index的默認佈局方式

3、菜單定義

       本demo是將全部的菜單內容定義在一個json的文件裏，前端訪問這個json文件加載菜單，這在之後能夠訪問一個路徑獲取json對象來加載菜單。

       這個菜單的文件內容大體格式以下：

text是指定的須要顯示的菜單名稱，sref是指定定義的前端路由時的名稱，icon是菜單的圖標，translate是提供了多語言翻譯的選擇，這裏不設置任何內容

4、angularjs延遲定義factory、service、controller等內容

       angualrjs提供良好的單頁框架，這就須要訪問以前須要加載所有的js文件，在本demo種，js代碼是寫在cshtml文件中的，這就須要在頁面頁面加載完畢後，給angularjs定義的app加載須要的內容，好比factroy、service、controller等內容。

      完成angualrjs延遲加載的核心代碼以下：

主要是給默認的app添加一個配置項，這個配置項裏給app添加一個register對象，經過這個來註冊對應的內容。

使用方式以下圖所示

這樣，就完成了當訪問後臺頁面時，一旦頁面加載成功，則註冊對應的controller。

5、angularjs訪問後臺數據

    angularjs使用$http服務訪問後臺數據，主要使用方式以下：

使用promise方式，能夠指定前端業務的訪問次序，關於promise模式，這裏不作介紹，感興趣的能夠自行百度(這裏算是坑麼，之後作填補，)。

6、總結

       經過本章介紹的前端框架，使得angularjs和訪問後端的頁面和數據結合起來，這樣就完成了先後端的整合。

      經過這樣的使用方式，先後端是能夠各自獨立開發，angularjs和C#都提供良好的單元測試，若是剛開始定義好了訪問路徑或者訪問數據的webapi接口，先後端的人員能夠根據接口各自開發，最後進行整合測試便可。

 

推薦QQ羣：

278252889(AngularJS中文社區)

5008599(MVC EF交流羣)

134710707(ABP架構設計交流羣 )

59557329(c#基地 )

230516560(.NET DDD )

本人聯繫方式：QQ：351157970