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

Question

私は、Babel & WebpackでES6インポートモジュールの構文を使用してAngular 1.5、UI Routerを組み合わせようとしています。私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.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"構文？

Answer 1

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

EDIT：とにかく各モジュールには独自のスコープがありますので、このように別のモジュールの変数を参照することはできません。

私は私の心を持っているソリューションは、以下の通りです：

1. インサイドのログイン/ 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と同じ方法で動作するはずです。