詳解AngularJs與SpringMVC簡單結(jié)合使用

更新時間：2017年06月28日 09:54:12 作者：dandancc007

本篇文章主要介紹了AngularJs與SpringMVC簡單結(jié)合使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

最近在學習AngularJS的知識，收獲不少，不過因為自己平時工作時開發(fā)都是用的freemarker+springmvc來做的頁面數(shù)據(jù)交互，所以也自然想到了用angularjs+springmvc來做同樣的事情。當然，在學習之前也到網(wǎng)上查閱了非常多的資料，但是都不是那么明細或者簡單，至少對于本人來說都是看的是一知半解。所以用了些時間對這種方式進行學習。

在查閱了許多的資料以后，大致明白了AngularJs將數(shù)值傳遞給后臺的方式是將要傳遞的對象Json化之后傳遞給后臺，這點和Ajax比較類似，當然也是屬于異步提交數(shù)據(jù)的方式。本人還沒有了解過AngularJs同步方式提交數(shù)據(jù)是怎樣，不過想想只需要將要的數(shù)據(jù)綁定在input標簽上，之后還是用html的提交還是可以簡便的實現(xiàn)的。

傳遞數(shù)據(jù)到后臺

下面就來簡單舉個例子來說明吧

首先我們把springmvc的環(huán)境搭好，先來web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
 <display-name>SpringMVC</display-name>
 <context-param>
 <param-name>contextConfigLocation</param-name>
 <param-value>/WEB-INF/AngularJSTestApplicationContext.xml</param-value>
 </context-param>

 <listener>
 <listener-class>
  org.springframework.web.context.ContextLoaderListener
 </listener-class>
 </listener>

 <servlet>
 <servlet-name>baobaotao</servlet-name>
 <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
 <init-param>
  <param-name>contextConfigLocation</param-name>
  <param-value>/WEB-INF/AngularJSTestApplicationContext.xml</param-value>
 </init-param>
 <load-on-startup>1</load-on-startup>
 </servlet>

 <servlet-mapping>
 <servlet-name>baobaotao</servlet-name>
 <url-pattern>*.do</url-pattern>
 </servlet-mapping>
</web-app>

這里我把applicationContext改了一個名字，以免和我自己本身用的沖突，并且設(shè)置了一下觸發(fā)springmvc的url模式，是以.do結(jié)尾發(fā)起請求

下面是AngularJSTestApplicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns:p="http://www.springframework.org/schema/p"
 xmlns:mvc="http://www.springframework.org/schema/mvc"
 xmlns:context="http://www.springframework.org/schema/context"
 xmlns:aop="http://www.springframework.org/schema/aop"
 xmlns:tx="http://www.springframework.org/schema/tx"
 xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
      http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
      http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
      http://www.springframework.org/schema/aop
      http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
      http://www.springframework.org/schema/tx
      http://www.springframework.org/schema/tx/spring-tx-3.0.xsd">
<mvc:annotation-driven />

<context:component-scan base-package="com.baobaotao.web"/>

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  <property name="prefix" value="/WEB-INF/jsp/" />
  <property name="suffix" value=".jsp" />
</bean>
</beans>

我直接用了<mvc:annotation-driven /> 就用默認的數(shù)據(jù)轉(zhuǎn)換器了，因為默認的里面有對Json串進行數(shù)據(jù)綁定的轉(zhuǎn)換器

這樣mvc的環(huán)境已經(jīng)搭建好了，下面我們寫頁面

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../angular.js"></script>
<title>AngularJSTest</title>
</head>
<body ng-controller="MyController">
 <p>User</p>
 <p>ID</p>
 <input id="id" name="id" ng-model="saveUser.id">
 <br>
 <p>Name</p>
 <input id="id" name="name" ng-model="saveUser.name">
 <br>
 <p>age</p>
 <input id="id" name="age" ng-model="saveUser.age">
 <br>
 <button ng-click="getUser()">提交</button>
 <script>
  function MyController($scope, $http){
   $scope.saveUser = {
    id:1,
    name:"John",
    age:"16"
   };

   $scope.getUser = function(){
    $http({
     method: "POST",
     url: "http://localhost:8080/SpringMVC/AngularJS/getUser.do",
     data: $scope.saveUser
    }).success(function (data, status){
     // handle success
    })
   };
  }
 </script>
</body>
</html>

頁面很簡單，有三個輸入?yún)?shù)，id，name，age綁定了控制器里面的saveUser對象的屬性，這個也對應了我后臺需要綁定的數(shù)據(jù)的屬性名稱。對于AngularJs,在body標簽處聲明了一個控制器MyController，之后在script中對這個控制器里面的saveUser 對象屬性進行了初始化并且定義了一個方法getUser，它是傳遞參數(shù)的關(guān)鍵。之后制定了當點擊提交按鈕以后會把數(shù)據(jù)傳遞出去。

看一下getUser方法，看上去很像ajax的提交數(shù)據(jù)方式，指定了請求的方法是Post，請求的地址url以及請求中要發(fā)送的數(shù)據(jù)data，這里我將MyController控制器中的對象屬性作為數(shù)據(jù)進行傳遞，這個對象在傳輸?shù)臅r候會自動的將其結(jié)構(gòu)轉(zhuǎn)換成Json格式進行傳遞

下面貼上后臺Controller的代碼

package com.baobaotao.web;

import com.baobaoto.domain.AngularUser;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping(value="/AngularJS")
public class TestAngularJS {

 @RequestMapping("/intro.do")
 public ModelAndView intro(){
  ModelAndView mav = new ModelAndView();
  mav.setViewName("AngularJsTest");
  return mav;
 }
 @RequestMapping(value="/getUser.do", method=RequestMethod.POST)
 public String getUser(@RequestBody AngularUser angularUser){
  System.out.println("ID" + angularUser.getId());
  System.out.println("name" + angularUser.getName());
  System.out.println("age" + angularUser.getAge());
  return null;
 }
}

頁面上的請求映射到了這里的getUser方法，因為頁面上提出的請求方法是post，所以我們這里也設(shè)定RequestMapping的method為post，最為關(guān)鍵的就是@RequestBody這個注釋，其可以將傳來的Json格式的數(shù)據(jù)與Bean中的屬性值進行直接綁定，也就是說這里的AngularUser 對象內(nèi)的屬性已經(jīng)成功的被賦值了，這里貼上AngularUser Bean定義

package com.baobaoto.domain;

public class AngularUser {

 Long id;

 String name;

 String age;

 public Long getId() {
  return id;
 }

 public void setId(Long id) {
  this.id = id;
 }

 public String getName() {
  return name;
 }

 public void setName(String name) {
  this.name = name;
 }

 public String getAge() {
  return age;
 }

 public void setAge(String age) {
  this.age = age;
 }

}

部署到服務器上運行，直接點擊提交按鈕以后后臺控制臺結(jié)果

ID1
nameJohn
age16

之后我們將input中的數(shù)值改變?yōu)?、David、17，點擊提交按鈕控制臺結(jié)果

ID2
nameDavid
age17

測試成功

從后臺獲取數(shù)據(jù)

這個要容易些，對原有的內(nèi)容適當修改就可以了

頁面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../angular.js"></script>
<title>AngularJSTest</title>
</head>
<body ng-controller="MyController">
 <p>User</p>
 <p>ID</p>
 <input id="id" name="id" ng-model="saveUser.id">
 <br>
 <p>Name</p>
 <input id="id" name="name" ng-model="saveUser.name">
 <br>
 <p>age</p>
 <input id="id" name="age" ng-model="saveUser.age">
 <br>
 <ul>
  <li ng-repeat="x in infos">
   {{ x.ID + x.name + x.age }}
 </li>
 </ul>
 <button ng-click="getUser()">提交</button>
 <script>
  function MyController($scope, $http){
   $scope.saveUser = {
    id:1,
    name:"John",
    age:"16"

   };

   $scope.getUser = function(){
    $http({
     method: "POST",
     url: "http://localhost:8080/SpringMVC/AngularJS/getUser.do",
     data: $scope.saveUser
    }).success(function (data){
     $scope.infos = data;
    })
   };

  }
 </script>
</body>
</html>

這里增加了一個ul標簽用來接收從后臺傳過來的數(shù)據(jù)，里面存儲的是一個Json數(shù)組，這個數(shù)組在當我們點擊按鈕之后觸發(fā)的回調(diào)函數(shù)中進行賦值，而回調(diào)的這個函數(shù)的參數(shù)data就是我們從后臺獲取到的數(shù)據(jù)，具體data是怎樣的要看后臺Controller中返回的數(shù)值是怎樣的。這里我們返回的是一個Json數(shù)組

package com.baobaotao.web;

import com.baobaoto.domain.AngularUser;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping(value="/AngularJS")
public class TestAngularJS {

 @RequestMapping("/intro.do")
 public ModelAndView intro(){
  ModelAndView mav = new ModelAndView();
  mav.setViewName("AngularJsTest");
  return mav;
 }
 @RequestMapping(value="/getUser.do", method=RequestMethod.POST)
 @ResponseBody
 public List<Map<String, String>> getUser(@RequestBody AngularUser angularUser){
  System.out.println("ID" + angularUser.getId());
  System.out.println("name" + angularUser.getName());
  System.out.println("age" + angularUser.getAge());
  List<Map<String, String>> list = new ArrayList<Map<String, String>>();
  for(int i = 0; i < 5; i++){
   Map<String, String> map = new HashMap<String, String>();
   map.put("ID", String.valueOf(i));
   map.put("name", String.valueOf(i));
   map.put("age", String.valueOf(i));
   list.add(map);
  }
  return list;
 }

}

上面是修改過的Controller，我將返回值改為了一個list，里面的數(shù)據(jù)是Map這樣就剛好符合Json數(shù)組的數(shù)據(jù)模式了，當然最重要的是這里在方法前需要添加一個@ResponseBody 注釋，它可以把返回的值轉(zhuǎn)化為Json格式的數(shù)據(jù)

好了，運行一下程序試試，點擊提交按鈕，出現(xiàn)了結(jié)果