2014-09-06 48 views
0

我学习如何导航页面。
这里是我的html页面RouteProvider不起作用

<html lang="en"> 

AngularJS路由例如

<body data-ng-app="sampleApp"> 


<div class="container"> 
    <div class="row"> 
    <div class="col-md-3"> 
     <ul class="nav"> 
      <li><a href="#AddNewOrder"> Add New Order </a></li> 
      <li><a href="#ShowOrders"> Show Order </a></li> 
     </ul> 
    </div> 
    <div> 
     <div data-ng-view></div> 
    </div> 
    </div> 
</div> 



</body> 


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>  

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js"></script> 
<script src="rout.js"></script> 

rout.js是我写过的所有configuringn部分。

var sampleApp = angular.module("sampleApp", []); 

sampleApp.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/AddNewOrder', { 
     templateUrl: '/add_order.html', 
     controller: 'AddOrderController' 
    }). 
     when('/ShowOrders', { 
     templateUrl: '/show_orders.html', 
     controller: 'ShowOrdersController' 
     }). 
     otherwise({ 
     redirectTo: '/route-paging.html' 
     }); 
}]); 

sampleApp.controller('AddOrderController', function($scope) { 
    $scope.message = 'This is Add new order screen'; 
}); 


sampleApp.controller('ShowOrdersController', function($scope) { 
    $scope.message = 'This is Show orders screen'; 
}); 

这是浏览网页的一个add_order.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
</head> 
<body> 
<h2>Add New Order</h2> 

{{ message }} 
</body> 
</html> 

其他页面Show_orders.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
</head> 
<body> 
<h2>Show Orders</h2> 

{{ message }} 
</body> 
</html> 

我把这个这个代码的例子。我的自我也尝试了同样的功能。但没有奏效。任何人都知道哪里可能是错的。

回答

1

AngularJS从版本1.2开始,将他们的routerProvider东西移动到一个单独的模块,名为ngRoute。所以,如果你使用的是1.2或更高版本,你必须包含额外的js文件(即角route.min.js)和注入模块

var sampleApp = angular.module("sampleApp", ['ngRoute']); 
+0

感谢帕特里克......它的工作。即使在本教程,没有提到。你节省了我的时间..看来,子版本升级可能会有重大变化。 – 2014-09-06 05:01:02