第10篇：ui-router+ocLazyLoad实现控制器js文件的按需加载

本文链接：https://blog.csdn.net/weixin_36185028/article/details/73607699

在使用angular搭建项目的时候，如果单页面过多，就会配置过多的控制器，服务器等，就会导致项目启动时太多的js文件加载进来，存在其不合理之处，使用ocLoadLoad可以实现单页面控制器等js文件的懒加载，避免项目启动时过多的文件加载进来。

下面以一个demo为例分析如何使用lazyload和ui-router实现控制器的懒加载

1.项目目录结构：

tpl 三个视图文件

ctrl 三个视图对应的控制器

lib 引入的库

app.js 启动文件，包括模块，主控制器和路由

index.js 主页面

2.引入库文件和配置ui-router导航

引入js文件：

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

主视图含导航：

<body ng-app="myApp" ng-controller="myCtrl">
    <h3>{{main}}</h3>
    <div>
        <span>
            <a ui-sref="a">第一页</a>
        </span>
        <span>
            <a ui-sref="b">第二页</a>
        </span>
        <span>
            <a ui-sref="c">第三页</a>
        </span>
    </div>
    <div ui-view="" style="width: 300px;height: 300px;background: #f2f2f2">
        主页
    </div>
</body>

3.项目入口文件app.js的配置

配置resolve属性时有不同的写法，下面引入三个控制器对应三种写法，在该demo中均可使用

//依赖注入oc.lazyLoad
var app = angular.module('myApp',['ui.router','oc.lazyLoad']);
//主页控制器
app.controller('myCtrl',function ($scope) {
    $scope.main = "ocLazyLoad+uiRouter实现angular单页面应用的控制器js文件按需加载";
});
//配置config
app.config(function ($stateProvider, $locationProvider,$urlRouterProvider) {
    $urlRouterProvider.otherwise('/index');
    $stateProvider
        //懒加载控制器的三种写法（为一个模块的前提下）
        .state('a',{
            url : '/a',
            controller : 'ctrla',//不写会报错
            templateUrl : './tpl/pagea.html',
            resolve : {
                loadMyCtrl : ['$ocLazyLoad',function ($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'myApp',//模块的名字，单个模块可以省略
                        files: ['ctrl/ctrla.js']//js文件地址
                    })
                }]
            }
        })
        .state('b',{
            url : '/b',
            templateUrl : './tpl/pageb.html',
            controller : 'ctrlb',
            resolve : {
                loadMyCtrl : function ($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'myApp',
                        files: ["ctrl/ctrlb.js"]
                    })
                }
            }
        })
        .state('c',{
            url : '/c',
            templateUrl : './tpl/pagec.html',
            controller : 'ctrlc',
            resolve : {
                loadMyCtrl : function ($ocLazyLoad) {
                    return $ocLazyLoad.load("ctrl/ctrlc.js")
                }
            }
        })
});

4.子控制器的配置

ctrla.js:

angular.module("myApp").controller('ctrla', function ($scope) {
   console.log(1);
   $scope.testA = 999;
});

另外两个ctrlb.js和ctrlc.js对应一样，需要注意的是若写成

app.controller('ctrla', function ($scope) {
   console.log(1);
   $scope.testA = 999;
});

则会报错

angular-1.3.0.js:10062 Error: [ng:areq] Argument 'ctrla' is not a function, got undefined

5.效果展示

控制器js文件实现了按需加载

demo地址：https://github.com/RidingACodeToStray/ocLazyLoad-uiRouter