angularJS $ routeProvider

我在我的grails應用程序中使用angularJS。在此之前，我嘗試了一個來自互聯網的樣本。我試圖在我的主視圖中使用angularJS $ routeProvider作爲局部視圖。我的工作流程如下：

我的主視圖是index.gsp中：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>AngularJS Routing example</title> 
</head> 

<body ng-app="routeApplication"> 

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


<script src="js/angular.js"></script> 
<script src="js/angular-route.js"></script> 
<script src="js/app.js"></script> 


</body> 
</html>

我的局部視圖是：add_order.gsp和show_orders.gsp顯示每個視圖示例消息。

我app.js如下：

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

sampleApp.config(['$routeProvider', 
    function($routeProvider) { 
     var base = '${request.contextPath}'; 

     $routeProvider. 
      when('/AddNewOrder', { 
      templateUrl: 'templates/add_order.html', 
      controller: 'AddOrderController' 
     }). 
      when('/ShowOrders', { 
       templateUrl: 'templates/show_orders.gsp', 
       controller: 'ShowOrdersController' 
      }). 
      otherwise({ 
       redirectTo: '/AddNewOrder' 
      }); 
    }]); 


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'; 

});

注：我創建了一個模板文件夾，並放置在我的parital意見。

此問題是，每當我點擊加載我的局部視圖它顯示

`http://localhost/angularJSrouting/templates/show_orders.gsp` 
    404 Not Found

我缺少的東西還是有放置局部視圖的任何問題？

來源

2014-06-19 Rashedul.Rubel

終於工作了，模板文件夾應該放在webapp裏面。在文件的html擴展名的情況下，它用作文件名。但在gsp的情況下，它需要添加一個下劃線，並在添加複數形式的「s」後出人意料地添加下劃線。如果是gsp：文件名_show_orders.gsp和templateUrl模板/ _show_orders.gsp –

我不認爲這會工作使用 '/' 而不是 '＃'。由於您的templateUrl是templates/show_orders.gsp，angularjs將嘗試在您的webapp中的templates文件夾中找到該文件。

來源

2014-06-19 14:40:04

感謝您的回覆Rishi Saraf。我也把我的意見放在模板文件夾內的webapp中，但它也沒有工作。我變得困惑了。 –

你必須重定向到

http://localhost/#/angularJSrouting/templates/show_orders.gsp url

你能在這些HTML線

<li><a href="#AddNewOrder"> Add </a></li> 
<li><a href="#ShowOrders"> Show </a></li>

來源

2014-06-19 07:41:35 Burhan

'/'不起作用。我曾嘗試像你所說的重定向，但徒勞無功。 –

angularJS $ routeProvider

回答

相關問題