ES6導入語法與Angular 1.5 UI路由器

Question

我想結合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.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. 

第二個問題。我如何使用控制器：「loginCtrl as login」語法與ES6導入/導出？

Answer 1

您指的是'login/login.ctrl.js'中的'app'變量，但該變量未定義（因爲您在定義它之前先導入了控制器）。

編輯：無論如何，每個模塊都有自己的作用域，所以你不能用這種方式引用來自不同模塊的變量。

的解決方案，我在我的腦海中以下幾點：

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

我沒有測試過代碼，但我相信你能明白我的意思。不確定第二個問題的含義，但ES6中的controllerAs應該與ES5中的相同。