Składnia importu ES6 z użyciem Angular 1.5 UI Router

Question

Próbuję połączyć Angular 1.5, UI Router, używając składni modułów importujących ES6 z Babel & Webpack.

W moich app.js mam:

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

W login/login.ctrl.js mam:

'use strict'; 

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

Kiedy zacząłem moją aplikację Mam następujący komunikat o błędzie:

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. 

Drugie pytanie. Jak mogę używać kontrolera: składnia "loginCtrl jako login" z importem/eksportem ES6?

Answer 1

Wewnątrz "login/login.ctrl.js" odwołujesz się do zmiennej "app", ale zmienna nie jest zdefiniowana (ponieważ importujesz kontroler przed jego zdefiniowaniem).

EDYCJA: W każdym razie każdy moduł ma swój własny zakres, więc nie można w ten sposób odwoływać się do zmiennej z innego modułu.

Rozwiązanie mam w głowie jest następujący:

1. wewnątrz 'login/login.ctrl.js' Utwórz nowy moduł

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

2. Dodaj modułu jako zależność głównym 'Aplikacja' moduł

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

Nie przetestowałem kodu, ale uważam, że widzisz, co mam na myśli. Nie wiesz, co masz na myśli z drugim pytaniem, ale controllerAs w ES6 powinno działać tak samo, jak w ES5.