AngularJS1.XX版本，如何做到动态懒加载多模块。

我使用AngularJS1.X.X创建了一个项目，定义一个是入口模块是appModule。

使用了ui.router模块进行了路由配置，并配置了多个路由模块的时候。

由于项目比较大，我对项目的功能模块进行拆分，我使用了 AModule、BModule分别在两个模块中添加各自的路由功能，在对应的config配置路由中，通过结合oc.lazyLoad进行懒加载js文件和css文件。

文件目录如下：

index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>load</title>
</head>
<body>
<div ng-controller="appCtrl"></div>
<div class="root">
    <ul>
        <li>
            <a href ui-sref="app.home">home</a>
            <a href ui-sref="app.a.list">a-list</a>
            <a href ui-sref="app.a.add">a-add</a>
            <a href ui-sref="app.b.list">b-list</a>
            <a href ui-sref="app.b.add">b-add</a>
        </li>
    </ul>
    <div class="app">
        <ui-view></ui-view>
    </div>
</div>
</body>
<script src="./vendor/angular-1.8.2/angular.js"></script>
<script src="./vendor/angular-ui-router/angular-ui-router.js"></script>
<script src="./vendor/angular-ui-router/stateEvents.min.js"></script>
<script src="./vendor/oclazyload/ocLazyLoad.js"></script>
<script src="./index.js"></script>
<script src="./index.config.js"></script>

<!--<script src="./js/module/AModule.js"></script>-->
<!--<script src="./js/module/BModule.js"></script>-->

</html>

index.js

let app = angular.module("app", [
    'ui.router',
    'ui.router.state.events',
    'oc.lazyLoad',
    // 'AModule',
    // 'BModule'
])

    .run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {

        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;

    }])

    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.when('/', '/app/home');
        $urlRouterProvider.when('/app/a', '/app/a/list');
        $urlRouterProvider.when('/app/b', '/app/b/list');
        $urlRouterProvider.otherwise('/app/home');

        $stateProvider.state("app", {
            abstract: true,
            url: '/app',
        });

        $stateProvider.state("app.home", {
            url: '/home',
            templateUrl: "./tpl/home.html"
        });

        $stateProvider.state("app.a", {
            abstract: true,
            url: '/a',
            resolve: ocLazyLoadFiles(["AModule"])
        });

        $stateProvider.state("app.b", {
            abstract: true,
            url: '/b',
            resolve: ocLazyLoadFiles(["BModule"])
        });

    }])

    .controller("appCtrl", function () {

        console.log("app controller");

    });

// lazy file func
function ocLazyLoadFiles(files) {
    return {
        deps: ['$ocLazyLoad',
            function ($ocLazyLoad) {
                return $ocLazyLoad.load(files);
            }
        ]
    }
}

index.config.js

app.config(
    ['$controllerProvider', '$compileProvider', '$filterProvider', '$provide',
        function ($controllerProvider, $compileProvider, $filterProvider, $provide) {

            app.controller = $controllerProvider.register;
            app.directive = $compileProvider.directive;
            app.filter = $filterProvider.register;
            app.factory = $provide.factory;
            app.service = $provide.service;
            app.constant = $provide.constant;
            app.value = $provide.value;
        }
    ]).config(
    ['$ocLazyLoadProvider', function ($ocLazyLoadProvider) {
        $ocLazyLoadProvider.config({
            debug: false,
            events: true,
            modules: [
                {
                    name: 'AModule',
                    files: [
                        './js/module/AModule.js',
                    ]
                },
                {
                    name: 'BModule',
                    files: [
                        './js/module/BModule.js',
                    ]
                },

            ]
        });
    }]
);

AModule.js

angular.module("AModule", []).config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {


    $stateProvider.state("app.a.list", {
        url: '/list',
        templateUrl: "./tpl/a-list.html",
        resolve: ocLazyLoadFiles(["./js/ctrl/a-list.js"])
    });

    $stateProvider.state("app.a.add", {
        url: '/add',
        templateUrl: "./tpl/a-add.html",
        resolve: ocLazyLoadFiles(["./js/ctrl/a-add.js"])
    });

}]);

a-list.js 和 a-add.js

angular.module("AModule").controller("aAddController", [function () {
    console.log('i am is list controller');
}])

angular.module("AModule").controller("aListController", [function () {
    console.log('i am is list controller');
}])