栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

将Spring MVC与Angular.JS混合

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

将Spring MVC与Angular.JS混合

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



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/615781.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号