use*_*071 19 spring-mvc angularjs
我想用我的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的内容区域.
目前,我在以下方面存在问题:
Mic*_*ael 23
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.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项目.
| 归档时间： |
|
| 查看次数： |
40067 次 |
| 最近记录： |