带有 Angular 1.5 UI 路由器的 ES6 导入语法答案

【问题标题】：ES6 import syntax with Angular 1.5 UI Router带有 Angular 1.5 UI 路由器的 ES6 导入语法
【发布时间】：2016-05-16 17:31:00
【问题描述】：

我正在尝试将 Angular 1.5、使用 ES6 导入模块语法的 UI Router 与 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.

第二个问题。如何在 ES6 导入/导出中使用控制器：“loginCtrl as login”语法？

【问题讨论】：

标签： javascript angularjs angular-ui-router ecmascript-6 es6-module-loader

【解决方案1】：

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

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

我想到的解决方案如下：

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

'use strict';

import angular from 'angular';

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

    });

将该模块添加为您的主“应用”模块的依赖项

'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 中的工作方式相同。

【讨论】：