Sintassi di importazione ES6 con router UI angolare 1.5

Question

Sto cercando di combinare Angular 1.5, UI Router utilizzando la sintassi dei moduli di importazione ES6 con Babel & Webpack.

Nei miei app.js ho:

'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 ho:

'use strict'; 

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

Quando ho iniziato la mia app ho seguente messaggio di errore:

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. 

E seconda domanda. Come posso utilizzare il controller: sintassi "loginCtrl as login" con ES6 import/export?

Answer 1

Si sta facendo riferimento alla variabile 'app' all'interno di 'login/login.ctrl.js' ma la variabile non è definita (perché si sta importando il controller prima di definirlo).

MODIFICA: In ogni caso, ogni modulo ha il proprio ambito, quindi non è possibile fare riferimento a variabili da diversi moduli in questo modo.

La soluzione che ho in mente è la seguente:

1. dentro 'accesso/login.ctrl.js' Crea nuovo modulo

   'use strict'; 
   
   import angular from 'angular'; 
   
   angular.module('ctrlsModule', []) 
       .controller('LoginCtrl', function() { 
   
       }); 
   

2. Aggiungere il modulo come dipendenza della vostra principale 'app' modulo

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

Non ho testato il codice ma credo che tu possa vedere cosa intendo. Non sei sicuro di cosa intendi con la seconda domanda, ma lo controllerAs in ES6 dovrebbe funzionare allo stesso modo di ES5.