2

我目前正在尝试将使用新路由器和 ECMAScript 6 编写的 Angular 1.4 应用程序的基本工作示例放在一起。我一直在不停地摆弄这段代码，但我不明白为什么我会收到错误被抛出：

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 路由器以及我的角度模块加载代码：

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 和新路由器。

4

3 回答 3

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>
于 2015-06-21T16:30:39.020 回答
0

基本上，它没有随 Angular v1.4 一起发布，所以你运行它的成功可能会有所不同。

https://github.com/angular/router

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

目前，代码已移至 angular/angular。API 仍在迅速变化，因此我不建议在重要的生产应用程序中使用它。（已编辑）

来自每周状态文档：

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

2015 年 5 月 11 日

(igor): 路由器

毛边太多，不适合 v1.4。与 Brian 和 Matias 一起改进它。

于 2015-06-20T06:09:46.337 回答
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 hereangular.module(moduleName).controller('NerdController',NerdController) 也抛出相同的

于 2015-11-13T02:56:03.317 回答