Question

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

});

注意：我创建了一个模板文件夹，并在其上放置了我的意见。

这个问题是，每当我点击加载我的部分视图时，它就会显示

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

我错过了什么或放置部分视图有什么问题吗？

Answer 1

我认为这不会起作用。由于您的templateUrl是templates / show_orders.gsp，angularjs将尝试在您的webapp中的templates文件夹中找到该文件。

Answer 2

您必须重定向到

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

你可以使用＆＃39; /＆＃39;而不是＆＃39;＃＆＃39;在那些html行

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

angularJS $ routeProvider

2 个答案: