Angular 模块注入错误 (Angular 1.5)

Question

我已经定义了一个示例项目结构来试用 ngComponentRouter。这是以下文件，

我可能缺少一些基本的东西。

Index.html

<h1 class="title">Component Router</h1>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <!-- Load up the router library - normally you might use npm/yarn and host it locally -->
  <script src="https://unpkg.com/@angular/router@0.2.0/angular1/angular_1_router.js"></script>
  <script src="./app.js"></script>
  <script src="./crisis.js"></script>
</head>

<body ng-app="app">
  <mycomp><mycomp>
</body>

app.js

angular.module('app', ['ngComponentRouter','crisis-center'])

.value('$routerRootComponent', 'mycomp')

.component('mycomp', {
  template:
    '<nav>\n' +
    '  <a ng-link="[\'CrisisCenter\']">Crisis Center</a>\n' +
    '  <a ng-link="[\'Heroes\']">Heroes</a>\n' +
    '</nav>\n' +
    '<ng-outlet></ng-outlet>\n',
  $routeConfig: [
    {path: '/crisis-center', name: 'CrisisCenter', component: 'crisisCenter'},
    {path: '/heroes', name: 'Heroes', component: 'heroes' }
  ]
});

并且，crisis.js

看起来像：

angular.module('crisis-center', [])
  .component('crisisCenter', {
    template: '<h2>Crisis Center</h2>'
      +'<div><button ng-click="vm.navigate()"</div>',
    controllerAs: "vm",
    controller: [ "$rootRouter",function($rootRouter){
      var vm = this;
      vm.navigate = fucntion() {
        console.log("In Navigate");
        $rootRouter.navigate(["SampleCrisis"]);
      };
      // return vm; -- Not sure about it
    }]
  });

控制台中的错误是：

crisis.js:8 Uncaught SyntaxError: Unexpected token {


angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=app&p1=Error%3A%20%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A21%3A332)
    at angular.js:38
    at angular.js:4630
    at q (angular.js:322)
    at g (angular.js:4591)
    at db (angular.js:4513)
    at c (angular.js:1777)
    at Ac (angular.js:1798)
    at fe (angular.js:1683)
    at angular.js:31018
    at HTMLDocument.b (angular.js:3197)

Answer 1

其实有一个错字，在crisis.js line.no 8中应该是function而不是fucntion

修改如下，

angular.module('crisis-center', [])
    .component('crisisCenter', {
        template: '<h2>Crisis Center</h2>' +
            '<div><button ng-click="vm.navigate()"</div>',
        controllerAs: "vm",
        controller: ["$rootRouter", function ($rootRouter) {
            var vm = this;
            vm.navigate = function () {
                console.log("In Navigate");
                $rootRouter.navigate(["SampleCrisis"]);
            };
            return vm;
        }]
    });

Angular 模块注入错误 (Angular 1.5)

Angular Module Injection Error (Angular 1.5)

javascript

angularjs

ngcomponentrouter