2014-09-06 77 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