Question

我们喜欢app可扩展，因此我们将应用程序分解为多个模块，每个模块都拥有控制器，服务和路由。我们有一个主模块叫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');
                    }
                }
            });
    }

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

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

对于demo，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：意外的令牌＆＃39;＆lt;＆＃39;

展开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>
...

我们如何解决这个问题？

流星角度懒惰负载模块

0 个答案: