2

我们喜欢应用程序可以扩展，因此我们将应用程序分解为多个模块，每个模块都有它自己的控制器、服务和路由。我们有一个名为 App 的主模块。

我们的想法是我们将子模块路由骑到 App 路由中，所以当状态到来时，它知道如何加载适当的模块。

angular.module(constants.AppName)
    .config(function($stateProvider) {
        testRouting($stateProvider);
    })
    .config(['$ocLazyLoadProvider', function($ocLazyLoadProvider) {
        $ocLazyLoadProvider.config({
            modules: [{
                name: 'TestModule',
                files: ['test/test.module.js']
            }]

        });
    }])
function testRouting($stateProvider) {

        $stateProvider
            .state('test', {
                url: '/test',
                template: '<h1>Hello world</h1>',
                controller: 'TestController as test',
                resolve: {
                    test: function($ocLazyLoad) {
                        return $ocLazyLoad.load('TestModule');
                    }
                }
            });
    }

一个子模块，我们放入imports文件夹，命名为Test

Test
----test.module.js
----test.route.js
----test.controller.js

对于演示，test.module.js 将其子子项的所有代码作为控制器、路由

class TestController {
    constructor() {
        this.name = 'World';
    }

    changeName() {
        this.name = 'angular-tips';
    }
}

export default angular.module('app.test').controller('TestController', TestController');

在浏览器检查下面，我们得到了 test.module.js:1SyntaxError: Unexpected token '<'

展开 test.module.js

<!DOCTYPE html >
< html >
< head >
< link rel = "stylesheet" type = "text/css" class = "__meteor-css__" href = "/merged-stylesheets.css?hash=d733ad43b8a8ab4b5a97c47f2b33d65d355ea82b" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< base href = "/" >
< link rel = "stylesheet" type = "text/css" href = "angular-material.css" />
< /head>
< body >
< toolbar></toolbar>
    < md - content ui - view = "" flex = ""></md-content>

< script type = "text/javascript" > __meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%401.3.4.1%22%2C%22meteorEnv%22%3A%7B%22NODE_ENV%22%3A%22development%22%2C%22TEST_METADATA%22%3A%22%7B%7D%22%7D%2C%22PUBLIC_SETTINGS%22%3A%7B%7D%2C%22ROOT_URL%22%3A%22http%3A%2F%2Flocalhost%3A3000%2F%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22appId%22%3A%221w09ep0126mooj17r7gwq%22%2C%22autoupdateVersion%22%3A%22c459eded836fdb6358458adf211521e2c1b9ff8a%22%2C%22autoupdateVersionRefreshable%22%3A%226f1b3536ad2883a3608eddfc8344d3a2d94f35ea%22%2C%22autoupdateVersionCordova%22%3A%22none%22%7D"));
< /script>
< script type = "text/javascript" src = "/packages/underscore.js?hash=27b3d669b418de8577518760446467e6ff429b1e"></script>
< script type = "text/javascript" src = "/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3"></script>
< script type = "text/javascript" src = "/packages/meteor-base.js?hash=78d760bd25caaa0aaaa51b630ff14fdbfddf0a80"></script>
...

我们如何解决这个问题？

4

0 回答 0