Смешивание пружины MVC с Angular.JS

Я хочу сделать одностраничное приложение с моей Spring MVC Backend. Я только что узнал Angular.js.Смешивание пружины MVC с 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? Я имею в виду, я запрошу страницу из весеннего mvc. Он будет использовать шаблон «template/detail.jsp» с заданными атрибутами модели. Но я поместил эту страницу в область содержимого моего ng-приложения.

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

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

источник

2013-06-24 user706071

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

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

Вместо этого контроллеры весны 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>

Ваш шаблон ("шаблон/деталь.HTML ")

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

Ваш угловой применение:

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.

источник

2013-07-04 16:03:59 Mickael

Как будет выглядеть структура проекта для этого примера? – burseaner

Смешивание пружины MVC с Angular.JS

ответ

Смежные вопросы