還在使用angular1進行開發的前端小夥伴有沒有想過這個問題，當專案不斷延伸擴充套件時，頁面開始增多，js,css檔案同樣會增多，如果繼續使用粗暴的將所有檔案載入在index.html頁面中，那麼首頁就會載入很多無用的程式碼，從而造成首屏載入時間過長，首頁載入時間超長我想沒有一個使用者能忍的吧，直接 GG 了。

那麼，可不可以做到，首頁只引入首屏需要顯示的必要程式碼，而在必要的時候再去載入各個模組的程式碼，做到按需懶載入呢？

我們只要在使用angular時配合ui-router、ocLazyLoad就可以實現分步按需載入js檔案。

步驟如下：

1 、首先完成頁面對angular、ui-router、ocLazyLoad的引入；

  <script src="../Scripts/angular.min.js"></script>
  <script src="../Scripts/angular-route.js"></script>
  <script src="../Scripts/ocLazyLoad.min.js"></script>

注：因為後面兩個都是angular的外掛，這就會導致一個問題，如果相互之間版本級別相差太大，那麼100%會掛。

2、配置路由和loader

var myapp=angular.module("myApp"
 
,["ui.router",'oc.lazyLoad']);
myapp.config(function($stateProvider,$urlRouterProvider,$ocLazyLoadProvider){
    $stateProvider
        .state('index', {//首頁
            url: '/index',
            templateUrl: 'templates/myIndex.html',
            resolve: {
                  loadMyCtrl: ['$ocLazyLoad', function
 
($ocLazyLoad){//這兩行就是loader的使用，此行寫法固定
                      return $ocLazyLoad.load('js/fit-store/fit-index.js');//後面這個就是進入這個模板時候要載入進來的js
                  }]
              }
        })
        .state('class', {//課程頁
            url: '/class',
            templateUrl: 'templates/class.html',
            resolve: {
                loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad){//這兩行就是loader的使用，此行寫法固定
                      return $ocLazyLoad.load('js/fit-class/fit-class.jss');//後面這個就是進入這個模板時候要載入進來的js
                }]
            }
            //controller: 'ProducersCtrl'
        })
    $urlRouterProvider.when('', '/leadPage');//初始預設引導頁
    $urlRouterProvider.otherwise("/index");/*BproDtails*/
})

3、此時我們就已經完成了配置，但是有些小夥伴會遇到這個問題
Error: [ng:areq] Argument 'ModalInstanceCtrl' is not a function, got undefined.

解決這個問題的方法很簡單，只需要在你每個引入的js檔案裡面再次重新定義var myapp = angular.module('myApp');即可（有些小夥伴不會出現這個問題，因為你在每個引入的js檔案中已經重新配置myapp了），如下圖：

到此，我們就實現了在angularjs1中結合ui-router、ocLazyLoad分步按需載入js檔案，祝小夥伴成功，遇到問題歡迎留言~