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

Lance.Wu 发表于: 2021-07-13   最后更新时间: 2021-07-13 16:50:50   203 游览

我使用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');
}])

BModule.js 代码与 AModule.js代码相似。

因要将网络资源与JS懒加载相结合,我在启动的index.html只添加 index.js,不添加子模块AB, 代码都正常运行,项目能启动。

当我的页面访问 到 http(s)://xxxxx.xxx.com/index.html#/app/a/list时无法显示页面,通通过调试模式F12打开资源,看到网页的中Sources 看到上面所说的JS文件全部都已加载进来,就是显示不出页面信息。

问题:

当访问app/a/list的时候,首先识别了app.a动态加载子模块AModule,然后在子模块中找到其中对应的app.a.list,加载其对应的a-list.js,但是现在就是显示不出页面信息。

参考代码: https://gitee.com/LanceWu_admin/angularjs-test.git




子模块路由要提前加载进去,否则当请求进来的时候,路由是无法匹配的,所以也不会触发父类的路由方法来懒加载子模块。

所以,所有的路由都是要提前加载进去的。

Lance.Wu -> ORC 11天前

按照你的说法,我只把所有模块路由都提前加载,是可以的,根据路由动态加载JS和CSS以及HTML,Thx.

找不到想要的答案?

我要提问
提问