在使用angular過程以前同事是采取一次性加載方式，在index頁面一次性加載所有的js跟css，這種加載方式只適合教學(xué)和小型項目中，中大型不建議使用，加載速度影響到用戶體驗。

在使用了Ui-Router以后，我第一想法就是把每個功能組件化，在請求視圖的時候再去加載該頁面js和css，index頁面主要加載必須文件：angular.js

于是嘗試了下，這樣去寫，但是發(fā)現(xiàn)angular報錯，原因是控制器沒有注入主程序

后面在angular庫里面發(fā)現(xiàn)ocLazyLoad，這是一個為angular量身定制腳本加載器，它只有15K

使用它很簡單：

依次載入文件

<script src="framework/angular/angular.min.js"></script> <script src="framework/angular-ui-router.js"></script> <script src="framework/ocLazyLoad.min.js"></script> <script src="framework/app.js"></script> 

跟平常寫路由一樣只是需要多一層resolve

路由在渲染之前會執(zhí)行resolve對象比如用來加載js和css，當(dāng)然還有其他用處

代碼：（不用擔(dān)心腳本重復(fù)加載，之前加載的腳本會在瀏覽器做緩存）

angular.module('myRouters', ['ui.router','oc.lazyLoad']) 

.state('index', {   url: '/index',   title: ' | ！',   views: {     'A': {       templateUrl: 'components/header/header.html',       controller: 'headerCtrl'     },     'C@index': {       templateUrl: 'components/header/h1.html',       controller: 'H2Ctrl'     }   },   resolve: {     loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {       return $ocLazyLoad.load(['components/header/H2.js',         'components/header/header.js',         'components/header/h3.js',         'components/header/header1.css']);     }]   } }) 

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯新站長站。