【问题标题】:angularJS $routeProviderangularJS $routeProvider
【发布时间】:2016-04-15 17:39:47
【问题描述】:

我在我的 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

是我遗漏了什么还是放置部分视图有什么问题?

【问题讨论】:

  • 终于成功了,模板文件夹应该放在webapp里面。在文件的 html 扩展名的情况下,它用作文件名。但在 gsp 的情况下,它需要添加一个下划线,并且令人惊讶的是,在添加一个类似复数形式的 's' 之后。在 gsp 的情况下:文件名 _show_orders.gsp 和 templateUrl 模板/_show_orders.gsp

标签: angularjs grails


【解决方案1】:

我认为这行不通。由于您的 templateUrl 是 templates/show_orders.gsp angularjs 将尝试在您的 webapp 的模板文件夹中找到该文件。

【讨论】:

  • 感谢您的回复 Rishi Saraf。我还将我的视图放在模板文件夹内的 webapp 中,但它也不起作用。我变得困惑了!!。
【解决方案2】:

你必须重定向到

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

你能在那些 html 行中使用 '/' 而不是 '#' 吗

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

【讨论】:

  • '/' 不起作用。我试过像你说的那样重定向,但没有成功。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-06-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多