2017-04-08 87 views
0

我已經定義了一個樣例項目結構來嘗試ngComponentRouter。以下是以下文件,角模塊注入錯誤(角1.5)

我可能會缺少基本的幾件事情。

的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/[email protected]/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) 

回答

1

實際上有一個錯字,在crisis.js line.no 8應該是的功能代替溫控功能

變化它作爲如下,

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; 
     }] 
    });