Angular 1.4 + ngNewRouter + ES6:无法读取未定义的属性'$ routeConfig'

时间:2015-06-20 04:35:18

标签: angularjs ecmascript-6 angular-new-router

我目前正在尝试将使用新路由器和ECMAScript 6编写的Angular 1.4应用程序的基本工作示例放在一起。我一直在摆弄这段代码,我不知道为什么我会得到抛出的错误:

Failed to instantiate module bookShelf due to:
TypeError: Cannot read property '$routeConfig' of undefined

我在我的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路由器的配置以及我的角度模块加载代码在另一个文件中:

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;

最后是实际的bootstrapping文件:

import { default as bookShelfModule} from './app/bookShelf.main.js';
angular.bootstrap(document, [bookShelfModule]);

我完全失去了所有帮助,我非常感激,因为我真的想开始使用ES6和新路由器。

3 个答案:

答案 0 :(得分:1)

为了让这个例子有效,我需要将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>

答案 1 :(得分:0)

基本上,它没有附带Angular v1.4,所以你成功运行它可能会有所不同。

https://github.com/angular/router

  

使用TypeScript编写的Angular 1.5和2.0的新路由器。

     

目前,代码已移至角度/角度。 API仍在快速变化,因此我不建议在重要的生产应用程序中使用它。   (编辑)的

来自Weekly Status doc:

https://docs.google.com/document/d/150lerb1LmNLuau_a_EznPV1I1UHMTbEl61t4hZ7ZpS0/edit#

  

2015年5月11日

     

(igor):路由器

     

太粗糙的边缘,没有为v1.4做好准备。与Brian和Matias合作改进它。

答案 2 :(得分:0)

经过数小时的实验和调整后,我发现当你首先定义控制器并且代码在控制器定义之后导致失败时

如果您移动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(&#39; NerdController&#39;,NerdController)也抛出相同的