0
내 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 각 뷰에 대한 샘플 메시지를 표시 할 수 있습니다.
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';
});
참고 : 다음과 같이
내 app.js는 내가 템플릿 폴더를 생성하고 그 내 parital 뷰를 배치했다.
이 문제는 때마다 내가 그것을
`http://localhost/angularJSrouting/templates/show_orders.gsp`
404 Not Found
마지막으로 작업 한 템플릿 폴더는 webapp 내부에 배치해야합니다. 파일의 html 확장의 경우 파일 이름으로 작동합니다. 하지만 gsp의 경우에는 밑줄을 추가해야하고 놀랍게도 복수형과 같은 's'를 추가해야합니다. gsp의 경우 : 파일 이름 _show_orders.gsp 및 templateUrl templates/_show_orders.gsp –