混合Spring MVC的与Angular.JS [英] Mixing Spring MVC with Angular.JS

查看：282
本文介绍了混合Spring MVC的与Angular.JS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想打一个单页应用程序与我的Spring MVC的后端。
我刚刚得知Angular.js。

我有包含两个链接左侧菜单。

其中使得请求到下面控制器。该控制器使得东西是由给定的模型属性填写网址转发和列表的详细信息。

  @RequestMapping（值={ID} /转/ {}去掉/细节，方法= RequestMethod.GET）
公共字符串细节（@PathVariable（ID）工程项目，@PathVariable（RID）修订版REV，型号model，HttpSession的会议）{
        用户的用户=（（用户）session.getAttribute（CSession.USER））;
        model.addAttribute（项目，项目）;
        model.addAttribute（REV，REV）;
        model.addAttribute（续，revContBS.getRevCont（REV，用户））;        回归模板/细节;
}

其他品牌要返回JSON控制器Ajax调用。

  @RequestMapping（值=文件/ {} FID，方法= RequestMethod.GET）
公共字符串@ResponseBody的GetFile（@PathVariable（FID）FV FV）{
        返回repBS.getVerCon（FV）;
}

目前，我有一个装饰：头，左边的菜单，和主要内容的区域。
如果我点击了一个链接，就会使整个页面刷新（因为它使页面转发和JSP模板）
如果我点击第二个链接，它只会改变主要内容的区域。

我想改变的第一个环节的行为，因为它应该只改变内容区。
是否有可能与Angular.JS + Spring MVC的？
我的意思是，我会请求从Spring MVC中的页面。它将模板模板/ detail.jsp与给定的​​模型属性。不过，我会把这个页面到我的NG-应用程序的内容区域。

目前，我有以下几个方面的问题：


  1. @RequestMapping（值={ID} /转/ {}去掉/细节，方法= RequestMethod.GET）是参数。我无法找到一种方法，使路由转发的参数。

  2. 我不知道我应该如何重新为我的模板/ detail.jsp，这样它会被放置到DIV叫NG-视图。


解决方案

AngularJS的指令NG-视图用于呈现关联到当前路由到您的html页面的模板。
主要的一点是，你的模版应该只管理客户端。

你所试图做的，是呈现一个模板服务器端，使用Spring MVC的，但是这不符合AngularJS单页的应用程序的想法。

相反，你的Spring MVC控制器应仅返回JSON对象：你写的RESTful服务，并使用AngularJS呈现模板，并获取你的模型

下面是您用例完整的例子：

index.html的：

 ＆LT; HTML NG-应用=对myApp＆GT;
＆LT; HEAD＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
    ＆LT;！ - 你的菜单 - ＆GT;
    ＆LT; UL＆GT;
        ＆LT;立GT;＆LT; A HREF =＃/项目/ 1 /转/ 1＆GT;项目1  - 修订版1 LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;立GT;＆LT; A HREF =＃/项目/ 1 /转/ 2＆GT;项目1  - 修订版2'; / A＆GT;＆LT; /李＆GT;
    ＆LT; / UL＆GT;    ＆LT;！ - 你的内容 - ＆GT;
    ＆LT; D​​IV NG-视图＆gt;
    ＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

您的模板（模板/ detail.html）

 ＆LT; D​​IV＆GT;项目编号：{{project.id}}＆LT; / DIV＆GT;

您的角度应用程序：

  angular.module（'对myApp'，[]）。
    配置（['$ routeProvider'，函数（$ routeProvider）{
        $ routeProvider。
            //绑定您的路线与您的模板和相关的控制器
            //你的模板将被加载到NG-景区
            当（'/项目/：专案编号/转/：REVID'，{templateUrl：'模板/ detail.html'，控制器：} myController的）。            //默认路由
            否则（{redirectTo：'/'}）;
    }]）;功能myController的（$范围，$ routeParams，$ HTTP）{
    //使用$ routeParams从当前的路由中得到的参数
    VAR专案编号= $ routeParams.projectId，
        REVID = $ routeParams.revId;    //这里我使用AngularJS $ HTTP API，但NG-种源可能会更易于使用
    //当你要处理的休息资源
    $ http.get（项目/+专案编号+'转/'+ REVID）.success（功能（数据）{
        $ scope.project = data.project;
        $ scope.rev = data.rev;
    }）;
}

您的Spring MVC控制器与REST服务：

  @RequestMapping（值={ID} /转/ {}去掉/细节，方法= RequestMethod.GET）
@ResponseBody
公共地图＆LT;弦乐，对象＆gt;详情（
         @PathVariable（ID）工程项目，
         @PathVariable（RID）修订版REV，
         HttpSession的会议）{    用户的用户=（（用户）session.getAttribute（CSession.USER））;    //我使用的地图为例子，但你应该使用一个真实的对象
    //这里的想法是，你返回一个REST资源
    地图＆LT;弦乐，对象＆gt;地图=新的HashMap＆LT;弦乐，对象＆gt;（）;
    map.put（项目，项目）;
    map.put（REV，REV）;
    map.put（续，revContBS.getRevCont（REV，用户））;
    返回地图;
}

请注意，如果你需要一个更复杂的路由器，你可以看看AngularUI项目。

I want to make a Single Page Application with my Spring MVC Backend. I've just learnt Angular.js.

I have a left menu consisting of two links.

One makes request to the below controller. This controller makes url forwarding and lists details of something which is filled by the given model attributes.

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

The other makes an ajax call to the controller which returns JSON.

@RequestMapping(value = "file/{fid}", method = RequestMethod.GET)
public @ResponseBody String getFile(@PathVariable("fid") FV fv) {
        return repBS.getVerCon(fv);
}

Currently, I have a decoration: the header, the left menu, and the main content area. If I click the first link, it will make a full page refresh (because it makes page forwarding and jsp templating) If I click the second link, it will only change the main content area.

I want to change the behavior of the first link because it should change only the content area. Is it possible with Angular.JS + Spring MVC? I mean, I will a request a page from the spring mvc. It will template "template/detail.jsp" with given model attributes. But I will put this page into the content area of my ng-app.

Currently, I have problems in following areas:

  1. @RequestMapping(value = "{id}/rev/{rid}/detail", method = RequestMethod.GET) is parametric. I couldn't find a way to make route forwarding parametric.
  2. I don't know how I should re-serve my "template/detail.jsp" so that it will be placed into the div called ng-view.

解决方案

The directive ng-view of AngularJS is used to render a template associated to the current route into your html page. The main point is that your templates should be managed client side only.

What you try to do here is to render a template server side, using Spring MVC but this is not the idea of a single page application with AngularJS.

Instead, your spring mvc controllers should only return json object : you write RESTful services and use AngularJS to render your template and fetch your model.

Here is a complete example for your use case :

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>

Your template ("template/detail.html")

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

Your angular application :

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;
    });
}

Your Spring MVC controller with your REST service :

@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;
}

Note that if you need a more complex router, you can have a look at AngularUI project.

这篇关于混合Spring MVC的与Angular.JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆