优化布局

采纳

编辑于 3年前

半兽人

我使用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

提问说明

我使用AngularJS1.X.X使用了，创建了项目，定义一个是入口模块，appModule。
使用了ui.router模块进行了路由配置，并配置了多个模块的时候路由。
由于项目比较大，我对项目的功能模块进行拆分，我使用了 AModule、BModule分别在两个模块中添加各自的路由功能，在各自的模块当中config配置使用路由中使用oc.lazyLoad进行动态的时候js文件和css文件。

文件目录如下
app.js

angular.module("appModule")
 .run(...){...}
 .config(...){

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

     $stateProvider.state('app.a', {
         url: '/a',
         resolve: {
             deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                 return $ocLazyLoad.load([
                     "AModule.js"
                 ]);
             }],
         },
     });
     $stateProvider.state('app.b', {
             url: '/b',
             resolve: {
                 deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                     return $ocLazyLoad.load([
                         "BModule.js"
                     ]);
                 }],
             },
         });
 }

a-list.js 和 a-add.js

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

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

AModule.js

angular.module("AModule")
 .config(...){

     $stateProvider.state('app.a.list', {
         url: '/list',
         resolve: {
             deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                 return $ocLazyLoad.load([
                     "a-list.js"
                 ]);
             }],
         },
     });
     $stateProvider.state('app.a.add', {
             url: '/add',
             resolve: {
                 deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                     return $ocLazyLoad.load([
                         "a-add.js"
                     ]);
                 }],
             },
         });
 }

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

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

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

问题：最终如何做到，我访问所对应的html页面，加载对应的模块文件其它附属JS文件。希望能做到module文件与controller或者component文件都是独立的文件，而不是全部放在一个文件当中。module文件中存放相对应的配置和路由信息，而controller或者component文件编写功能信息。

预览

源

记录

编辑于 3年前

Lance.Wu

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

AngularJS

提问说明

我使用AngularJS1.X.X使用了，创建了项目，定义一个是入口模块，appModule。
使用了ui.router模块进行了路由配置，并配置了多个模块的时候路由。
由于项目比较大，我对项目的功能模块进行拆分，我使用了 AModule、BModule分别在两个模块中添加各自的路由功能，在各自的模块当中config配置使用路由中使用oc.lazyLoad进行动态的时候js文件和css文件。

文件目录如下
app.js

angular.module("appModule")
 .run(...){...}
 .config(...){

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

     $stateProvider.state('app.a', {
         url: '/a',
         resolve: {
             deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                 return $ocLazyLoad.load([
                     "AModule.js"
                 ]);
             }],
         },
     });
     $stateProvider.state('app.b', {
             url: '/b',
             resolve: {
                 deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                     return $ocLazyLoad.load([
                         "BModule.js"
                     ]);
                 }],
             },
         });
 }

a-list.js 和 a-add.js

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

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

AModule.js

angular.module("AModule")
 .config(...){

     $stateProvider.state('app.a.list', {
         url: '/list',
         resolve: {
             deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                 return $ocLazyLoad.load([
                     "a-list.js"
                 ]);
             }],
         },
     });
     $stateProvider.state('app.a.add', {
             url: '/add',
             resolve: {
                 deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                     return $ocLazyLoad.load([
                         "a-add.js"
                     ]);
                 }],
             },
         });
 }

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

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

预览