獲取錯誤$ routeProvider未定義當我嘗試使用ngRoute

這是我第一次問一個關於stackoverflow的問題，因爲到目前爲止我能夠找到我需要的所有答案。這一次，我不能。我的問題是每次我嘗試使用ngRoute我得到一個錯誤，在控制檯說：「錯誤時間：

[$注射器：modulerr]未能實例化模塊demoApp由於： $ routeProvider $未定義」。

這裏是我的html代碼：

<!DOCTYPE html> 
<html ng-app="demoApp"> 
<head> 
    <title>AngularJS</title> 
    <meta charset='UTF-8'> 
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script> 
    <script src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script> 
</head> 
<body> 
<article> 
    <div ng-view> 

    </div> 
</article> 

</body> 
</html>

這是我的角碼：

var demoApp = angular.module('demoApp', ['ngRoute']); 

demoApp.controller('Ctrl', ['$scope', function($scope){ 
    $scope.customers = [ 
     {firstName: 'Fostata', lastName: 'Boklik'}, 
     {firstName: 'John', lastName: 'Hoe'}, 
     {firstName: 'Jane', lastName: 'Doe'} 
    ]; 

    $scope.addCustomer = function(){ 
     $scope.customers.push({firstName: $scope.newCustFirstName, lastName: $scope.newCustLastName}); 
    }; 
}]); 

demoApp.config(function($routeProvider) { 
     $routeProvider 
      .$.when('/', { 
       templateURL: '/home/martin4o29/Documents/WebSites/angular practice/first steps/Partials/View1.html', 
       controller: 'Ctrl' 
      }) 
      .$.when('.view2', { 
       templateURL: '/home/martin4o29/Documents/WebSites/angular practice/first steps/Partials/view2.html', 
       controller: 'Ctrl' 
      })   
      .otherwise({ 
       redirectTo: '/' 
      }); 

    });

View1.html：

<!DOCTYPE html> 
<html> 
<head> 
    <title>AngularJS</title> 
    <meta charset='UTF-8'> 
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script> 
    <script src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script> 
</head> 
<body data-ng-app='demoApp'> 

    <article data-ng-controller="Ctrl"> 
     <input type="text" data-ng-model='name'> 
     <br> 
      <div> 
       <ul> 
        <li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li> 
       </ul> 
      </div> 

     <input type="text" data-ng-model='newCustFirstName'> 
     <br> 
     <input type="text" data-ng-model='newCustLastName'> 
     <br> 

     <button data-ng-click="addCustomer()">AddCustomer</button> 

    </article> 

    <a href="#/view2">View2</a> 

</body> 
</html>

view2.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>AngularJS</title> 
    <meta charset='UTF-8'> 
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script> 
    <script type="text/javascript" src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script> 
</head> 
<body data-ng-app='demoApp'> 

    <article data-ng-controller="Ctrl"> 
     <input type="text" data-ng-model='name'> 
     <br> 
    <div> 
     <ul> 
      <li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li> 
     </ul> 
    </div> 

    </article> 

</body> 
</html>

來源

2015-04-20 Martin Kaldrumov

你能擺脫第一的/在tempURL，看看它是否起作用？ –

我做到了，它仍然無法正常工作 –

首先修正您模板

移除頭部腳本
遠程納克應用內
刪除控制器

實施例視圖：

<!DOCTYPE html> 
<html> 
    <body> 
     <article> 
      <input type="text" data-ng-model='name'> 
      <br> 
      <div> 
       <ul> 
        <li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li> 
       </ul> 
      </div> 
     </article> 
    </body> 
</html>

視圖是限定只有應該的部分被改變，而不是整個應用程序。

更換$routeProvider.$.when與$routeProvider.when

來源

2015-04-20 21:53:39

刪除這些標籤的原因是什麼？ –

加載index.html時，應用程序正在引導，從此時開始，您可以使用路由器開始更改其中的一部分。每條路線都會更改部分應用程序，加載模板，編譯它等等。你要做的就是在工作中引導相同的應用程序。其次，你已經爲你的片段控制器定義了控制器：Ctrl'，並且你想用ng-controller指令添加它兩次。 –

哦庫爾談論查看頁面哈哈我的壞 –

獲取錯誤$ routeProvider未定義當我嘗試使用ngRoute

回答

相關問題