ES6-import-syntax mit Eckigen 1.5 UI-Router

Ich versuche zu kombinieren, Winkel-1.5, UI-Router mit ES6 import-Module-syntax mit Babel & Webpack.

In meinem app.js ich habe:

'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' 
            })
    });

In login/login.ctrl.js ich habe:

'use strict';

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

Als ich anfing, meine app habe ich folgende Fehlermeldung:

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.

Und zweite Frage. Wie kann ich mit controller: "loginCtrl als login" - syntax mit ES6-import/- export?

InformationsquelleAutor der Frage karl | 2016-02-06

  1. 10

    Verweisen Sie auf 'app' - variable in Ihre "login/login.ctrl.js' aber die variable nicht definiert ist (weil Sie den Import der controller vor, es zu definieren).

    EDIT: Sowieso jedes Modul hat seinen eigenen Bereich, so dass Sie können nicht beziehen sich auf Variablen aus anderen Modul auf diese Weise.

    Die Lösung habe ich in meinem Kopf ist folgende:

    1. Innen 'login/login.ctrl.js' neues Modul

      'use strict';

import angular from 'angular';

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

    });

    2. Fügen Sie das Modul als Abhängigkeit von Ihrem wichtigsten app ' Modul

      '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' 
            });
    });

    Habe ich noch nicht getestet der code, aber ich glaube, Sie können sehen, was ich meine. Nicht sicher, was du meinst mit der zweiten Frage aber controllerAs im ES6 sollte funktionieren auf die gleiche Weise wie in ES5.

    InformationsquelleAutor der Antwort Karol

Schreibe einen Kommentar