gpt4 book ai didi

angularjs - angularJS $ routeProvider

转载 作者:行者123 更新时间:2023-12-02 15:28:21 26 4
gpt4 key购买 nike

我在grails应用程序中使用angularJS。在此之前,我尝试了互联网上的样本。我试图在我的主 View 中将angularJS $ routeProvider用于部分 View 。我的工作流程如下:

我的主要观点是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>

我的局部 View 是:add_order.gsp和show_orders.gsp,以显示每个 View 的示例消息。

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

});

注意:我创建了一个templates文件夹,并在其上放置了部分 View 。

问题是,每当我单击以加载我的局部 View 时,它都会显示
 `http://localhost/angularJSrouting/templates/show_orders.gsp`
404 Not Found

我是否缺少某些东西或放置局部 View 有任何问题?

最佳答案

我认为这行不通。由于您的templateUrl为templates / show_orders.gsp,angularjs会尝试在您的Web应用程序的templates文件夹内找到该文件。

关于angularjs - angularJS $ routeProvider,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24301092/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com