web-dev-qa-db-fra.com

Syntaxe d'importation ES6 avec Angular 1.5 UI Router

J'essaie de combiner Angular 1.5, UI Router en utilisant la syntaxe des modules d'importation ES6 avec Babel & Webpack.

Dans mon app.js j'ai:

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

Dans login/login.ctrl.js, j'ai:

'use strict';

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

Lorsque j'ai démarré mon application, j'ai le message d'erreur suivant:

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.

Et deuxième question. Comment puis-je utiliser le contrôleur: la syntaxe "loginCtrl comme login" avec l'importation/exportation ES6?

javascriptangularjsangular-ui-routerecmascript-6es6-module-loader
16
karl

Vous faites référence à la variable "app" dans votre "login/login.ctrl.js" mais la variable n'est pas définie (car vous importez le contrôleur avant de le définir).

EDIT: Quoi qu'il en soit, chaque module a sa propre portée, vous ne pouvez donc pas faire référence aux variables d'un module différent de cette façon.

La solution que j'ai en tête est la suivante:

  1. Dans 'login/login.ctrl.js', créez un nouveau module

    'use strict';

import angular from 'angular';

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

    });

  2. Ajouter le module en tant que dépendance de votre module principal "app"

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

Je n'ai pas testé le code mais je pense que vous pouvez voir ce que je veux dire. Je ne sais pas ce que vous voulez dire avec la deuxième question, mais controllerAs dans ES6 devrait fonctionner de la même manière que dans ES5.

10
Karol