Angularjs 異步模塊加載項目模板

ng-lazy-module-seed（Angularjs 異步模塊加載項目模板）

相信作過SPA項目的朋友都遇到過這個問題：頁面初始化時須要加載文件太大或太多了，許多文件加載後極可能不會運行到，這是赤裸裸的資源浪費。從性能角度出發，理想的 SPA 應該是：按需加載。
實現資源按需加載的方式有不少，不過在angular 1.x環境下存在這樣一個問題：angular默認的模塊化機制(使用angular.module實現)須要在bootstrap前完成加載、註冊，不然會報找不到provider。幸運的是，ocLazyLoad經過重寫angular.module函數，解決了上述問題，因此，咱們能夠大膽放心的使用ocLazyLoad進行異步模塊化開發了。
在此分享一個基於 requirejs + angularjs + ocLazyload 的 Angularjs 異步模塊加載項目模板。
---

技術棧

模板中主要用到以下技術：

• scss, compass
• require.js, angularjs, ocLazyLoad, r.js
• gulp, bower

運行項目

運行項目模板，查看demo，在已安裝bower, node的前提下請運行以下命令：

bower install
npm install

如今，依賴已經安裝完畢，接下來可執行打包：

gulp -a

或者直接進行開發：

gulp watch

就能夠看到頁面了

項目文件夾結構

• .r :require 打包相關代碼
• app :用於存放開發代碼
• dist :用於存放生產環境代碼

gulp 命令

// 開發環境
gulp watch
// 打包
gulp -a
// 部分打包
gulp

詳細說明，後續補充