ES6 导入语法与 Angular 1.5 UI 路由器
ES6 import syntax with Angular 1.5 UI Router
我正在尝试将使用 ES6 导入模块语法的 Angular 1.5, UI Router 与 Babel & Webpack 结合起来。
在我的应用程序中.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 作为登录名"语法与 ES6 导入/导出?
您在"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 中的工作方式相同。
相关文章:
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- AngularJS UI路由器不能像ng路由器那样工作
- AngularJS ui路由器html5模式中断路由
- EJS中的Angularjs-Ui路由器参数
- 使用AngularJS中的UI路由器将状态重定向到默认子状态
- 如何在ui路由器angularjs中只更改子ui视图,同时保持父视图不变
- 在UI路由器中以抽象状态填充常见视图
- angularjs中带有ui路由器的嵌套视图
- 当需要身份验证时,ui路由器不会重定向
- Ui路由器:获取控制器中视图的名称
- 在Angular ui路由器中,如何将事件从一个视图发送到另一个视图
- 带有嵌套状态的Angular ui路由器和后退按钮
- 如何加载嵌套3个状态的UI路由器UI视图模板
- Angular ui路由器中的绝对名称
- Ui路由器未显示嵌套的子内容
- ui路由器的惰性加载状态
- 访问url[材质Ui+选项卡]时,Angular Ui路由器未加载视图
- AngularJS UI路由器未进入默认状态
- Angular UI路由器-检查父状态
- 状态更改期间角度UI路由器中的嵌套视图滞后