JavaScript – 使用Angular 1.5 UI路由器的ES6导入语法

我正在尝试将Angular 1.5,UI路由器与ES6导入模块语法与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导入/导出？

解决方法

您在’login / login.ctrl.js’中指的是’app’变量,但变量未定义(因为在定义之前导入控制器).

编辑：无论如何,每个模块都有自己的范围,所以你不能以这种方式引用不同模块的变量.

我在脑海中的解决方案如下：

> Inside’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',controller: 'LoginCtrl',controllerAs: 'login' 
            });
    });

我没有测试代码,但我相信你可以看到我的意思.不知道你对第二个问题的意思是什么,而ES6中的controllerAs应该和ES5一样工作.

原文地址：https://www.jb51.cc/js/151968.html