Question

我正在尝试将使用ES6导入模块语法的Angular 1.5，UI路由器与Babel＆amp;的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

您指的是＆＃39; app＆＃39;您的＆＃39; login / login.ctrl.js中的变量＆＃39;但是未定义变量（因为您在定义控制器之前导入控制器）。

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

我想到的解决方案是：

Inside＆＃39; login / login.ctrl.js＆＃39;创建新模块

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

使用Angular 1.5 UI路由器

1 个答案: