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; });}您的带有REST服务的Spring MVC控制器:
@RequestMapping(value = "{id}/rev/{rid}/detail", method = RequestMethod.GET)@ResponseBodypublic 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项目。



