将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";
}

另一个对返回JSON的控制器进行ajax调用。

@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的内容区域中。

目前，我在以下领域遇到问题：

@RequestMapping（value =“ {id} / rev / {rid} / detail”，method = RequestMethod.GET）是参数化的。我找不到使路由转发参数化的方法。
我不知道该如何重新保存“ template / detail.jsp”，以便将其放置在名为ng-view的div中。

问题答案：

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)
@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项目。

将Spring MVC与Angular.JS混合

微信关注