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

Initialization order for ES6 imports and angular controllers

本文关键字：初始化 顺序 控制器 导入 ES6      更新时间：2023-09-26

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

看着迁移到ES6并使用import而不是require（），我发现依赖顺序的代码不再工作。附件是我想做的事情的粗略近似（从未运行）版本。

我唯一想到的是，可以从index.js导出RegisterIndexController（）函数，然后由app.js调用它。这很有效，但不知道我是否可以用另一种方式推送依赖关系。控制器可以从app.js 传递"应用程序"

app.js

app = angular.module('app', ['ui.router'])
angular.element(document).ready(() => angular.bootstrap(document, ['app']))
import './controllers/index'
app.run(() => {
    })

index.js

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

index.html

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

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(() => {
})
相关文章：