javascript - Sintaxis de importación ES6 con Angular 1.5 UI Router

angularjs angular-ui-router

Question

Estoy tratando de combinar Angular 1.5, UI Router usando la sintaxis de los módulos de importación ES6 con Babel & Webpack.

En mi app.js tengo:

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

En login / login.ctrl.js tengo:

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

Cuando empecé mi aplicación tengo el siguiente mensaje de error:

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.

Y segunda pregunta. ¿Cómo puedo usar el controlador: la sintaxis "loginCtrl as login" con ES6 importar / exportar?

Answer 1

Se refiere a la variable ''app'' dentro de su ''login / login.ctrl.js'' pero la variable no está definida (porque está importando el controlador antes de definirlo).

EDITAR: De todos modos, cada módulo tiene su propio alcance, por lo que no puede referirse a variables de diferentes módulos de esta manera.

La solución que tengo en mi mente es la siguiente:

1. Dentro de ''login / login.ctrl.js'' crea un nuevo módulo

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

2. Agregue el módulo como dependencia de su módulo principal de ''aplicación''

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

No he probado el código pero creo que puedes ver lo que quiero decir. No estoy seguro de lo que quieres decir con la segunda pregunta, pero los controllerAs de ES6 deberían funcionar de la misma manera que en ES5.