Angular 1.4 + ngNewRouter + ES6:无法读取 属性 未定义的“$routeConfig”
Angular 1.4 + ngNewRouter + ES6 : Cannot read property '$routeConfig' of undefined
我目前正在尝试拼凑一个 Angular 1.4 应用程序的基本工作示例,该应用程序是使用新路由器和 ECMAScript 6 编写的。我一直在不停地摆弄这段代码,但我没有不明白为什么我会收到抛出的错误:
Failed to instantiate module bookShelf due to:
TypeError: Cannot read property '$routeConfig' of undefined
我的 angular 应用程序在我的 index.html 文件中被引导:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<div class="container">
<ng-viewport></ng-viewport>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-new-router/dist/router.es5.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module" src="app/bootstrap.js"></script>
</body>
</html>
我在另一个文件中有 1.4 路由器的配置以及我的 angular 模块加载代码:
import { default as NerdController } from 'public/components/Nerd/Nerd.js';
import { default as MainController } from 'public/components/Main/Main.js';
import { default as NerdService } from 'public/services/NerdService.js';
var moduleName = 'bookShelf';
var app = angular.module(moduleName, ['ngNewRouter', NerdService])
.config(['$componentLoaderProvider', SetTemplatesPath])
.controller('AppController', ['$router', AppController])
.controller(NerdController)
.controller(MainController);
function SetTemplatesPath ($componentLoaderProvider) {
$componentLoaderProvider.setTemplateMapping(name => `public/components/${name}/${name}.html`);
}
function AppController ($router) {
$router.config([
{ path: '/', redirectTo: '/main' },
{ path: '/main', component: 'main' }, // component is template + controller from components folder
{ path: '/nerds', component: 'nerd' }
]);
}
export default moduleName;
最后是实际的引导文件:
import { default as bookShelfModule} from './app/bookShelf.main.js';
angular.bootstrap(document, [bookShelfModule]);
我完全不知所措,任何帮助将不胜感激,因为我真的很想开始使用 ES6 和新路由器。
基本上,它没有随 Angular v1.4 一起提供,因此您获得它的成功率 运行 可能会有所不同。
https://github.com/angular/router
A new router for Angular 1.5 and 2.0, written with TypeScript.
For now, the code has been moved to angular/angular. APIs are still rapidly changing, so I don't recommend using this in an important production app quite yet.
(edited)
来自每周状态文档:
https://docs.google.com/document/d/150lerb1LmNLuau_a_EznPV1I1UHMTbEl61t4hZ7ZpS0/edit#
May 11th, 2015
(igor): router
Too many rough edges, not ready for v1.4. Work with Brian and Matias to improve it.
为了让这个示例正常工作,我需要将 AppController 应用到 index.html 文件中的 body 标签,如下所示:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Home</title>
</head>
<body ng-controller="AppController">
<div class="container">
<ng-viewport></ng-viewport>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-new-router/dist/router.es5.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module" src="app/bootstrap.js"></script>
</body>
</html>
经过数小时的试验和调整后,我发现当您先定义控制器并且代码在控制器定义之后导致此失败
如果您移动 AppController
function AppController ($router) {
$router.config([
{ path: '/', redirectTo: '/main' },
{ path: '/main', component: 'main' }, // component is template + controller from components folder
{ path: '/nerds', component: 'nerd' }
]);
}
在此之前
var app = angular.module(moduleName, ['ngNewRouter', NerdService])
.config(['$componentLoaderProvider', SetTemplatesPath])
.controller('AppController', ['$router', AppController])
.controller(NerdController)
.controller(MainController);
那你就不会看到那个问题了。
最佳做法是先定义控制器然后声明
喜欢智者
angular.module(moduleName).controller(NerdController) also throws the same
错误。
enter code here
angular.module(moduleName).controller('NerdController',NerdController) 也抛出相同的
我目前正在尝试拼凑一个 Angular 1.4 应用程序的基本工作示例,该应用程序是使用新路由器和 ECMAScript 6 编写的。我一直在不停地摆弄这段代码,但我没有不明白为什么我会收到抛出的错误:
Failed to instantiate module bookShelf due to:
TypeError: Cannot read property '$routeConfig' of undefined
我的 angular 应用程序在我的 index.html 文件中被引导:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<div class="container">
<ng-viewport></ng-viewport>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-new-router/dist/router.es5.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module" src="app/bootstrap.js"></script>
</body>
</html>
我在另一个文件中有 1.4 路由器的配置以及我的 angular 模块加载代码:
import { default as NerdController } from 'public/components/Nerd/Nerd.js';
import { default as MainController } from 'public/components/Main/Main.js';
import { default as NerdService } from 'public/services/NerdService.js';
var moduleName = 'bookShelf';
var app = angular.module(moduleName, ['ngNewRouter', NerdService])
.config(['$componentLoaderProvider', SetTemplatesPath])
.controller('AppController', ['$router', AppController])
.controller(NerdController)
.controller(MainController);
function SetTemplatesPath ($componentLoaderProvider) {
$componentLoaderProvider.setTemplateMapping(name => `public/components/${name}/${name}.html`);
}
function AppController ($router) {
$router.config([
{ path: '/', redirectTo: '/main' },
{ path: '/main', component: 'main' }, // component is template + controller from components folder
{ path: '/nerds', component: 'nerd' }
]);
}
export default moduleName;
最后是实际的引导文件:
import { default as bookShelfModule} from './app/bookShelf.main.js';
angular.bootstrap(document, [bookShelfModule]);
我完全不知所措,任何帮助将不胜感激,因为我真的很想开始使用 ES6 和新路由器。
基本上,它没有随 Angular v1.4 一起提供,因此您获得它的成功率 运行 可能会有所不同。
https://github.com/angular/router
A new router for Angular 1.5 and 2.0, written with TypeScript.
For now, the code has been moved to angular/angular. APIs are still rapidly changing, so I don't recommend using this in an important production app quite yet. (edited)
来自每周状态文档:
https://docs.google.com/document/d/150lerb1LmNLuau_a_EznPV1I1UHMTbEl61t4hZ7ZpS0/edit#
May 11th, 2015
(igor): router
Too many rough edges, not ready for v1.4. Work with Brian and Matias to improve it.
为了让这个示例正常工作,我需要将 AppController 应用到 index.html 文件中的 body 标签,如下所示:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Home</title>
</head>
<body ng-controller="AppController">
<div class="container">
<ng-viewport></ng-viewport>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-new-router/dist/router.es5.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module" src="app/bootstrap.js"></script>
</body>
</html>
经过数小时的试验和调整后,我发现当您先定义控制器并且代码在控制器定义之后导致此失败
如果您移动 AppController
function AppController ($router) {
$router.config([
{ path: '/', redirectTo: '/main' },
{ path: '/main', component: 'main' }, // component is template + controller from components folder
{ path: '/nerds', component: 'nerd' }
]);
}
在此之前
var app = angular.module(moduleName, ['ngNewRouter', NerdService])
.config(['$componentLoaderProvider', SetTemplatesPath])
.controller('AppController', ['$router', AppController])
.controller(NerdController)
.controller(MainController);
那你就不会看到那个问题了。
最佳做法是先定义控制器然后声明
喜欢智者
angular.module(moduleName).controller(NerdController) also throws the same
错误。
enter code here
angular.module(moduleName).controller('NerdController',NerdController) 也抛出相同的