ES6与Angular 1.5 UI Router的导入语法

Question

我正在尝试使用ES6导入模块语法，结合Babel和Webpack，将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/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.

第二个问题是，我如何在使用ES6的import/export语法时使用controller: "loginCtrl as login"的语法？

- karl

Answer 1

你在 'login/login.ctrl.js' 中引用了 'app' 变量，但该变量未定义（因为您在定义控制器之前导入它）。

编辑：无论如何，每个模块都有自己的作用域，因此您不能以这种方式从不同的模块引用变量。

我心目中的解决方案是：

1. 在 'login/login.ctrl.js' 中创建一个新模块

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

   将该模块作为您的主要“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中的使用方式相同。

- Karol