Question

正致力于在ES6上运行AngularJS应用程序。从历史上看，我已经使用了允许控制器文件在应用程序中注册自己的模式，因为这样我就不必担心文件定义的控制器，服务等。使用require（）我已经能够对依赖项和初始化进行排序，这样就很容易，并且可以专注于控制器文件。

查看迁移到ES6并使用import而不是require（），并发现依赖于订单的代码不再有效。附件是我想要做的粗略近似（从未运行）版本。

我唯一能想到的是，可以从index.js导出RegisterIndexController（）函数，然后由app.js调用它。哪个有效，但想知道我是否可以通过其他方式推动依赖。控制器可以通过的地方＆＃34; app＆＃34;来自app.js

app.js

app.controller('IndexController', IndexController)

class IndexController {
    /*@ngInject*/
    constructor() {
        this.count = 10
    }
}

index.js

<div ng-controller="IndexController as vm">
  {{ vm.count }}
</div>

的index.html

<body>
    <div class="container">
        <div id="header">
            <div id="infoBar">
                <ul id="infoList">
                    <li class="infoItem">508-995-9695</li>
                    <li class="infoItem">13 Ventura Drive</li>
                    <li class="infoItem">North Dartmouth, MA</li>
                    <li class="infoItem">02747</li>
                </ul>
            </div>
            <h1>Marmelo Bros. Construction</h1>
            <p>"Premier Construction & Masonry"</p>
        </div>
        <div class="wrapper">
            <div id="navBar">
                <ul id="navList">
                    <li class="navItem">Home</li>
                    <li class="navItem">About Us</li>
                    <li class="navItem">Portfolio</li>
                    <li class="navItem">Contact Us</li>
                </ul>
            </div>  
        </div>
    </div>
</body>

Answer 1

ES6导入被提升到文件的顶部，所以你不能依赖这样的订购。问题的核心在于您依赖于未在任何地方定义的隐式依赖项（app）。明确导入app将确保您实际按顺序完成任务。

另请注意，class声明未被提升，因此您的控制器注册顺序错误。

app.js

export default angular.module('app', ['ui.router']);

index.js

import app from '../app';

app.controller('IndexController', class IndexController {
    /*@ngInject*/
    constructor() {
        this.count = 10
    }
});

entry.js

import app from './app';
import './controllers/index'

angular.element(document).ready(() => angular.bootstrap(document, ['app']))

app.run(() => {
})

ES6导入和角度控制器的初始化顺序

1 个答案: