Порядок инициализации импорта ES6 и угловых контроллеров

Question

Порядок инициализации импорта ES6 и угловых контроллеров

0

Работала над тем, чтобы приложение AngularJS работало на ES6. Исторически я использовал шаблон, позволяющий файлам контроллера регистрироваться в приложении, так как я не беспокоюсь о том, какие контроллеры, службы и т.д. Определяет файл. Используя require(), я смог заказать зависимости и инициализацию, чтобы это было легко и позволяло сфокусироваться на файле контроллера.

Глядя на переход на ES6 и использование import, а не require(), и я обнаружил, что код, зависящий от порядка, больше не работает. Прикрепленное является приблизительной (никогда не запускаемой) версией того, что я хотел бы сделать.

Единственное, что я выяснил, это возможность экспортировать функцию RegisterIndexController() из index.js, а затем вызвать ее app.js. Что работает, но интересно, могу ли я подталкивать зависимость другим способом. Где контроллер может быть передан "app" из 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>

koblas 26 июнь 2015, в 17:05

Источник

Теги:

javascript

ecmascript-6

angularjs

es6-module-loader

1 ответ

Ещё вопросы

loganfsmyth · Accepted Answer · 2015-06-26T14-59-00.000Z

Импорт 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(() => {
})

Файлы JS были скорее демонстрацией, это для того, чтобы заметить проблему.