gpt4 book ai didi

spring-mvc - 将 Spring MVC 与 Angular.JS 混合使用

转载 作者:行者123 更新时间:2023-12-03 12:46:38 25 4
gpt4 key购买 nike

我想用我的 Spring MVC 后端制作一个单页应用程序。
我刚刚学习了 Angular.js。

我有一个由两个链接组成的左侧菜单。

一个人向下面的 Controller 发出请求。该 Controller 进行 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 的 Controller 进行 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 Controller 应该只返回 json 对象:您编写 RESTful 服务并使用 AngularJS 呈现您的模板并获取您的模型。

    这是您的用例的完整示例:

    索引.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 Controller :
    @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 - 将 Spring MVC 与 Angular.JS 混合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17277076/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com