获取错误$ 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

回答

相关问题