將Spring MVC與Angular.JS混合使用

我想用我的Spring MVC後端製作單頁應用程序。我剛剛學會了Angular.js。將Spring MVC與Angular.JS混合使用

我有一個由兩個鏈接組成的左側菜單。

一個向下面的控制器發出請求。該控制器進行網址轉發，並列出由給定模型屬性填充的內容的詳細信息。

@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有可能嗎？我的意思是，我會請求從春天mvc頁面。它將使用給定的模型屬性模板「template/detail.jsp」。但是我會把這個頁面放到我的ng-app的內容區域。

目前，我有以下幾個方面的問題：

@RequestMapping（值= 「{ID} /轉/ {RID} /細節」，方法= RequestMethod.GET）是參數化的。我找不到路線轉發參數的一種方法。
我不知道我應該如何重新提供我的「template/detail.jsp」，以便將其放入稱爲ng-view的div中。

來源

2013-06-24 user706071

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>

你的模板（「模板/細節。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; 
    }); 
}

你的Spring MVC的控制器與REST服務：

@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項目

來源

2013-07-04 16:03:59 Mickael

這個例子的項目結構如何？ – burseaner

將Spring MVC與Angular.JS混合使用

回答

相關問題