使用Angular 1.5 UI路由器的ES6導入語法

Question

我正在嘗試將使用ES6導入模塊語法的Angular 1.5，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.

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

Answer 1

您在“login / login.ctrl.js”中引用了“app”變量，但未定義變量（因為您在定義控制器之前導入控制器）。

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

我腦子里想到的解決方案如下：

1. 在'login / login.ctrl.js'里面創建新模塊

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

2. 添加模塊作為主“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' }); }); 

我沒有測試過代碼，但我相信你可以看到我的意思。 不確定你對第二個問題的意思，但ES6中的controllerAs應該與ES5中的工作方式相同。