Синтаксис импорта ES6 с маршрутизатором пользовательского интерфейса Angular 1.5

Я пытаюсь объединить Angular 1.5, UI Router, используя синтаксис модулей импорта ES6 с Babel и Webpack.

В моем app.js у меня есть:

'use strict';

import angular from 'angular';
import uiRouter from 'angular-ui-router';
...
import LoginCtrl from './login/login.ctrl.js'


const app = angular.module("app", [
        uiRouter,
        ...
    ])
    .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('login', {
                url: '/login',
                templateUrl: '...', 
                controller: LoginCtrl,
                controllerAs: 'login' 
            })
    });

В login/login.ctrl.js у меня есть:

'use strict';

export default app.controller("LoginCtrl", function() {
    //code here
});

Когда я запустил свое приложение, у меня появилось следующее сообщение об ошибке:

ReferenceError: app is not defined
 bundle.js:35422:2
Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it.

И второй вопрос. Как я могу использовать контроллер: синтаксис «loginCtrl as login» с импортом/экспортом ES6?


javascript angularjs ecmascript-6 angular-ui-router es6-module-loader
person karl    schedule 06.02.2016    source источник

Ответы (1)


arrow_upward
11
arrow_downward

Вы имеете в виду переменную «приложение» внутри вашего «login/login.ctrl.js», но переменная не определена (поскольку вы импортируете контроллер перед его определением).

РЕДАКТИРОВАТЬ: В любом случае каждый модуль имеет свою собственную область, поэтому вы не можете ссылаться на переменную из другого модуля таким образом.

Решение, которое я имею в виду, следующее:

  1. Внутри 'login/login.ctrl.js' создайте новый модуль

    'use strict';

import angular from 'angular';

angular.module('ctrlsModule', [])
    .controller('LoginCtrl', function () {

    });

  2. Добавьте модуль в качестве зависимости от вашего основного модуля «приложение».

    'use strict';

import angular from 'angular';
import uiRouter from 'angular-ui-router';
...
import './login/login.ctrl.js';

angular.module('app', [uiRouter, 'ctrlsModule', ...])
    .config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider
             .state('login', {
                url: '/login',
                templateUrl: '...', 
                controller: 'LoginCtrl',
                controllerAs: 'login' 
            });
    });

Я не тестировал код, но думаю, вы понимаете, что я имею в виду. Не уверен, что вы имеете в виду под вторым вопросом, но controllerAs в ES6 должен работать так же, как и в ES5.

person Karol    schedule 07.02.2016