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

我没有测试过代码,但我相信你可以看到我的意思.不确定你对第二个问题的意思,但controllerAs在ES6中应该像在ES5中一样工作.