AngularJS $routeProvider

#angularjs #grails

Вопрос:

Я использую AngularJS в своем приложении grails. До этого я попробовал образец из Интернета. Я пытался использовать 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';

});

Примечание: я создал папку templates и разместил в ней свои паритальные представления.

Эта проблема заключается в том, что всякий раз, когда я нажимаю, чтобы загрузить свои частичные представления, он показывает

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

Я что-то упустил или есть какие-то проблемы с размещением частичных представлений?

1. наконец-то сработало, папка шаблона должна быть помещена внутри webapp. в случае расширения html файла он работает как имя файла. но в случае gsp ему необходимо добавить символ подчеркивания и, что удивительно, после добавления формы множественного числа, подобной «s». в случае gsp: имя файла _show_orders.gsp и templateUrl templates/_show_orders.gsp

Ответ №1:

Я не думаю, что это сработает. Поскольку ваш templateUrl — templates/show_orders.gsp, angularjs попытается найти этот файл внутри папки templates в вашем веб-приложении.

Ответ №2:

Вы должны перенаправить на

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

можете ли вы использовать ‘/’ вместо ‘#’ в этой строке html

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