Подтвердить что ты не робот

Смешивание Spring MVC с Angular.JS

Я хочу сделать одностраничное приложение с моим Spring MVC Backend. Я только что узнал Angular.js.

У меня есть левое меню, состоящее из двух ссылок.

Один запрашивает контроллер ниже. Этот контроллер делает перенаправление URL и перечисляет детали того, что заполнено данными данной модели.

@RequestMapping(value = "{id}/rev/{rid}/detail", method = RequestMethod.GET)
public String detail(@PathVariable("id") Project project, @PathVariable("rid") Rev rev, Model model, HttpSession session) {
        User user = ((User) session.getAttribute(CSession.USER));
        model.addAttribute("project", project);
        model.addAttribute("rev", rev);
        model.addAttribute("cont", revContBS.getRevCont(rev, user));

        return "template/detail";
}

Другой вызов ajax для контроллера, который возвращает JSON.

@RequestMapping(value = "file/{fid}", method = RequestMethod.GET)
public @ResponseBody String getFile(@PathVariable("fid") FV fv) {
        return repBS.getVerCon(fv);
}

В настоящее время у меня есть украшение: заголовок, левое меню и основная область содержимого. Если я нажму на первую ссылку, она сделает полное обновление страницы (потому что это делает переадресацию страницы и шаблоны jsp) Если я нажму вторую ссылку, она изменит только основную область содержимого.

Я хочу изменить поведение первой ссылки, потому что она должна изменять только область содержимого. Возможно ли это с помощью Angular.JS + Spring MVC? Я имею в виду, я буду запрашивать страницу из Spring mvc. Он будет использовать шаблон "template/detail.jsp" с заданными атрибутами модели. Но я поместил эту страницу в область содержимого моего ng-приложения.

В настоящее время у меня проблемы в следующих областях:

  • @RequestMapping (value = "{id}/rev/{rid}/detail", method = RequestMethod.GET) является параметрическим. Я не мог найти способ перенаправления маршрута.
  • Я не знаю, как я должен повторно использовать свой "template/detail.jsp", чтобы он был помещен в div с именем ng-view.
4b9b3361

ОТВЕТЫ

Ответ 1

Директива ng-view для AngularJS используется для визуализации шаблона, связанного с текущим маршрутом, на вашу html-страницу. Главное, чтобы ваши шаблоны управлялись только на стороне клиента.

Что вы пытаетесь сделать здесь, это визуализировать серверную часть шаблона, используя Spring MVC, но это не идея одностраничного приложения с AngularJS.

Вместо этого ваши контроллеры Spring mvc должны возвращать только объект json: вы пишете сервисы RESTful и используете AngularJS для визуализации вашего шаблона и выборки вашей модели.

Вот полный пример вашего варианта использования:

index.html:

<html ng-app="myApp">
<head>
</head>
<body>
    <!-- Your menu -->
    <ul>
        <li><a href="#/project/1/rev/1">Project 1 - Rev 1</a></li>
        <li><a href="#/project/1/rev/2">Project 1 - Rev 2</a></li>
    </ul>

    <!-- Your content -->
    <div ng-view>
    </div>
</body>
</html>

Ваш шаблон ( "template/detail.html" )

<div>Id of project : {{project.id}}</div>

Ваше приложение angular:

angular.module('myApp', []).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            // Bind your route with your template and associated controller
            // Your template will be loaded into ng-view area
            when('/project/:projectId/rev/:revId', { templateUrl: 'template/detail.html', controller: MyController }).

            // Default route
            otherwise({redirectTo: '/'});
    }]);

function MyController($scope, $routeParams, $http) {
    // Use $routeParams to get parameter from your current route
    var projectId = $routeParams.projectId,
        revId = $routeParams.revId;

    // Here I use $http API from AngularJS but ng-resouce may be easier to use 
    // when you have to deal with rest resources
    $http.get('project/' + projectId + 'rev/' + revId).success(function(data) {
        $scope.project = data.project;
        $scope.rev = data.rev;
    });
}

Ваш Spring контроллер MVC с вашей службой REST:

@RequestMapping(value = "{id}/rev/{rid}/detail", method = RequestMethod.GET)
@ResponseBody
public Map<String, Object> detail(
         @PathVariable("id") Project project,
         @PathVariable("rid") Rev rev,
         HttpSession session) {

    User user = ((User) session.getAttribute(CSession.USER));

    // I use a map for the example but you should probably use a "real" object
    // The idea here is that you return a rest resource
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("project", project);
    map.put("rev", rev);
    map.put("cont", revContBS.getRevCont(rev, user));
    return map;
}

Обратите внимание: если вам нужен более сложный маршрутизатор, вы можете посмотреть проект AngularUI.