angularjs1结合ui-router、ocLazyLoad分步按需加载js文件

还在使用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文件，祝小伙伴成功，遇到问题欢迎留言~

angularjs1结合ui-router、ocLazyLoad分步按需加载js文件

猜你喜欢