web-dev-qa-db-ja.com

Angular 1.5 UIルーターを使用したES6インポート構文

Angular 1.5、ES6インポートモジュール構文を使用するUIルーターとBabelおよびWebpackを組み合わせようとしています。

私のapp.jsに私は：

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

Login/login.ctrl.jsには次のようになっています。

'use strict';

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

アプリを起動すると、次のエラーメッセージが表示されます。

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.

そして2番目の質問。 ES6のインポート/エクスポートでコントローラー： "loginCtrl as login"構文を使用するにはどうすればよいですか？

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

「login/login.ctrl.js」内の「app」変数を参照していますが、変数が定義されていません（定義する前にコントローラーをインポートしているため）。

編集：とにかく、各モジュールには独自のスコープがあるため、この方法で異なるモジュールの変数を参照することはできません。

私が考えている解決策は次のとおりです：

  1. 「login/login.ctrl.js」内に新しいモジュールを作成します

    'use strict';

import angular from 'angular';

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

    });

  2. メインの「アプリ」モジュールの依存関係としてモジュールを追加します

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

私はコードをテストしていませんが、私が何を意味するかを理解できると思います。 2番目の質問の意味がわかりませんが、ES6のcontrollerAsはES5と同じように機能するはずです。

10
Karol