Spring MVC与Angular.JS的混合
我想用我的Spring 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？我的意思是，我将从spring mvc请求一个页面。它将模板" template /detail.jsp“与给定的模型属性。但是我将把这个页面放到我的ng-app的内容区域中。
目前，我有以下几个方面的问题：
方法= "{id}/rev/{rid}/detail"，
- @RequestMapping(value = RequestMethod.GET)是参数化的。我找不到使路由转发参数化的方法。
- 我不知道如何重新提供"template/detail.jsp“，以便将其放入名为ng-
的div中。
回答 1
Stack Overflow用户
发布于 2013-07-05 00:04:00
AngularJS的指令ng-view用于将与当前路由相关联的模板呈现到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;
});
}带有REST服务的Spring MVC控制器：
@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项目。
https://stackoverflow.com/questions/17277076
复制相似问题