目錄結構如下:

目錄結構

注意：用運了gulp前端構建工具，將src原始路徑下的代碼洲愤，重新構建到build文件夾下面。

（一）項目的目錄結構和技術架構彻犁。

? ? ? 拿到項目后首先要搭起目錄結構和技術架構,我用了angular+gulp+bootstrap構建項目，angular框架用于前后端分離和系統(tǒng)模塊化汞幢，gulp用于壓縮，生成版本號和ES6的編譯等森篷。項目的目錄結構也是先以功能劃分模快仲智，然后根據(jù)angular的特點买乃，每個功能下面由控制器为牍、服務、過濾器岩馍、頁面、CSS........來劃分蛀恩。

目錄結構

（二）內(nèi)部技術

? ? ? 外部框架技術選好后，要在此基礎上選擇angular 內(nèi)部技術因為是單頁面應用壳咕，所以頁面之間的跳轉(zhuǎn)全靠路由來運作，angular的路由有兩種原生的ng-route和封裝的ui-router,ng-route不能一個頁面出現(xiàn)兩個ng-view（也就是說頁面中的兩個部分不能同時隨路由改變而變化）顽馋，所以選擇使用ui-router谓厘。同時為了避免單頁面應用的入口頁面因為加載全系統(tǒng)的js/css而頁面顯示緩慢，所以采用了ocLazyLoad.js懶加載技術寸谜，給入口頁“分洪”竟稳。

（三）具體操作

? ? ? 1.angular項目首先需要有一個入口頁，然后還得有一個中間頁面，再接著才是真正的模塊頁面他爸。我這里首頁為index.hrml,頁面內(nèi)容我截取了一小部分

首頁

? ? 中間頁面為home.html,頁面內(nèi)容為：

中間頁

? ? ?那么為什么需要一個中間頁面呢聂宾？為什么不能把中間頁面的內(nèi)容直接放在首頁上？這個我覺得多一個中間頁面诊笤，路由層次感系谐，再更深入的理解，我還是個菜鳥讨跟，現(xiàn)在也不怎么清楚纪他。

? ? ?2.每個用angular框架構建的項目就相當于一個angular實例化的對象，ng-app作用是告訴子元素以下的指令是歸angularJs的晾匠，angularJs會識別的止喷。所以一個ng-app就代表一個angular的實例化對象，因此一個angular項目也只能有一個ng-app.說到實例化對象混聊，在創(chuàng)建實例化對象的時候一定得把angular的分裝插件包含進去弹谁，例如，本項目中使用到的ui-router和ocLazyLoad.js句喜。而又因為懶加載的原因所以得重寫一下angular原有的controller预愤、service、filter咳胃、direct植康。AngularJS原生并不支持動態(tài)加載Controller的方法，但是卻提供注冊Controller的方法展懈。通過上述代碼便可實現(xiàn)動態(tài)加載Controller销睁。把angular.module("xxx")的實例的factory、controller存崖、directive冻记、value、filter 等等方法都“變換”掉来惧，讓我們的代碼執(zhí)行這些方法的時候冗栗，直接把我們的函數(shù)放在運行期的對應的緩存的對象里面，這樣一來異步加載的代碼就會在執(zhí)行的時候真正被注冊到Angular運行時可以讀取的地方（Angular運行時具體緩存各個構造函數(shù)的地方自己扒源碼吧供搀，懶得貼出來了）隅居，這樣在路由激活的時候，就可以找到對應的controller葛虐，然后執(zhí)行胎源。

angular實例化

? ? 3.頁面的路由功能

? ? ? $urlRouterProvider負責監(jiān)聽$location.當$location變化的時候涕蚤，$urlRouterProvider開始在一個規(guī)則的列表中一個個的查找，直到找到匹配的值。

? ? ? ?$stateProvider 處理路由狀態(tài)的服務申钩，路由的狀態(tài)反映了該項在應用程序中的位置瘪阁，描述了在當前狀態(tài)下UI是應該怎么樣的，并且該做什么义黎。

路由

? ? 4.項目的權限控制

? ? ?左側菜單是由后臺傳參動態(tài)生成的廉涕，用了angular的樹的生成方式

側邊欄導航

? ? ? 權限要控制到按鈕級別狐蜕，在用戶登錄時层释，根據(jù)用戶ID得到用戶角色ID快集，根據(jù)角色ID獲得用戶擁有的的權限（RBAC基于角色的權限訪問控制（Role-Based Access Control）），權限分為兩個部分乖寒，一個是左側菜單欄的權限（就是頁面在前端的顯示路徑）宵统，一個是能向后臺發(fā)起請求并得到正確回應的權限（即接口地址）覆获，然后前者直接循環(huán)顯示在頁面菜單欄弄息，后者則通過事先寫的好所有接口的權限控制服務（如下圖），通過將此服務注入到每個控制器涤伐，來判斷登錄用戶是否擁有此權限，從而控制發(fā)起請求的按鈕顯示與隱藏祝迂。

基于角色的權限訪問控制

事先寫好的系統(tǒng)所有權限服務

? ?4.接口單獨抽離出來

? ? ? 一般都會根據(jù)不同的環(huán)境配置不同的接口（接口的不同一般體現(xiàn)在接口前面的域名上）型雳，所以前端為了配合后臺得把接口抽離出來山害，接口前面的域名用變量代替，然后從后臺給定的接口中讀取環(huán)境相對應的域名冤荆。例如：

接口

讀取環(huán)境對應域名

5.服務service

提取出來的公共service

公共service

然后每個模塊的服務器里都如此定義

模塊里的服務

項目里gulp的用法這里就不談了，下篇文章繼續(xù)聊涌庭！