详解AngularJs与SpringMVC简单结合使用

2024-09-28 22:22:49

最近在学习AngularJS的知识，收获不少，不过因为自己平时工作时开发都是用的freemarker+springmvc来做的页面数据交互，所以也自然想到了用angularjs+springmvc来做同样的事情。当然，在学习之前也到网上查阅了非常多的资料，但是都不是那么明细或者简单，至少对于本人来说都是看的是一知半解。所以用了些时间对这种方式进行学习。

在查阅了许多的资料以后，大致明白了AngularJs将数值传递给后台的方式是将要传递的对象Json化之后传递给后台，这点和Ajax比较类似，当然也是属于异步提交数据的方式。本人还没有了解过AngularJs同步方式提交数据是怎样，不过想想只需要将要的数据绑定在input标签上，之后还是用html的提交还是可以简便的实现的。

传递数据到后台

下面就来简单举个例子来说明吧

首先我们把springmvc的环境搭好，先来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改了一个名字，以免和我自己本身用的冲突，并且设置了一下触发springmvc的url模式，是以.do结尾发起请求

下面是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 /> 就用默认的数据转换器了，因为默认的里面有对Json串进行数据绑定的转换器

这样mvc的环境已经搭建好了，下面我们写页面

<%@ 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>

页面很简单，有三个输入参数，id，name，age绑定了控制器里面的saveUser对象的属性，这个也对应了我后台需要绑定的数据的属性名称。对于AngularJs,在body标签处声明了一个控制器MyController，之后在script中对这个控制器里面的saveUser 对象属性进行了初始化并且定义了一个方法getUser，它是传递参数的关键。之后制定了当点击提交按钮以后会把数据传递出去。

看一下getUser方法，看上去很像ajax的提交数据方式，指定了请求的方法是Post，请求的地址url以及请求中要发送的数据data，这里我将MyController控制器中的对象属性作为数据进行传递，这个对象在传输的时候会自动的将其结构转换成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，所以我们这里也设定RequestMapping的method为post，最为关键的就是@RequestBody这个注释，其可以将传来的Json格式的数据与Bean中的属性值进行直接绑定，也就是说这里的AngularUser 对象内的属性已经成功的被赋值了，这里贴上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;
 }

}

部署到服务器上运行，直接点击提交按钮以后后台控制台结果

ID1
nameJohn
age16

之后我们将input中的数值改变为2、David、17，点击提交按钮控制台结果

ID2
nameDavid
age17

测试成功

从后台获取数据

这个要容易些，对原有的内容适当修改就可以了

页面

<!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标签用来接收从后台传过来的数据，里面存储的是一个Json数组，这个数组在当我们点击按钮之后触发的回调函数中进行赋值，而回调的这个函数的参数data就是我们从后台获取到的数据，具体data是怎样的要看后台Controller中返回的数值是怎样的。这里我们返回的是一个Json数组

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，里面的数据是Map这样就刚好符合Json数组的数据模式了，当然最重要的是这里在方法前需要添加一个@ResponseBody 注释，它可以把返回的值转化为Json格式的数据

好了，运行一下程序试试，点击提交按钮，出现了结果

测试成功

上面这两种是最简单的方式实现了AngularJs和springmvc的结合使用，基本的功能算是实现了，后面若学到还有其他方法会在这里补充

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

解决angular的post请求后SpringMVC后台接收不到参数值问题的方法

这是我后台SpringMVC控制器接收isform参数的方法,只是简单的打出它的值: @RequestMapping(method = RequestMethod.POST) @ResponseBody public Map<String, Object> save( @RequestParam(value = "isform", required = false) String isform) { System.out.println("isform value
Angular.js前台传list数组由后台spring MVC接收数组示例代码

前言本文主要给大家介绍了关于Angular.js前台传list数组由后台spring MVC接收数组的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍吧. 在开发中有时候需要在前台自定义对象,然后把对象封装在list中,在传送到后台,这样的思想也比较合理,直接来看示例代码: 1. 前台代码 $scope.saveScore = function () { $scope.userScoreList = new Array();//自定义数组 angular.forEach (
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境

最近想学习AngularJS的使用,网上搜了一圈后,折腾了半天解决bug后,成功使用AngularJS整合Springmvc.Spring.Mybatis搭建了一个开发环境.(这里Spring使用的版本是4.0.6,Mybatis版本是3.2.5,AngularJS的版本是1.0.3) 第一步:创建一Maven项目,在pom.xml下添加需要的包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="
详解AngularJs与SpringMVC简单结合使用

最近在学习AngularJS的知识,收获不少,不过因为自己平时工作时开发都是用的freemarker+springmvc来做的页面数据交互,所以也自然想到了用angularjs+springmvc来做同样的事情.当然,在学习之前也到网上查阅了非常多的资料,但是都不是那么明细或者简单,至少对于本人来说都是看的是一知半解.所以用了些时间对这种方式进行学习. 在查阅了许多的资料以后,大致明白了AngularJs将数值传递给后台的方式是将要传递的对象Json化之后传递给后台,这点和Ajax比较类似,当然
详解AngularJS ui-sref的简单使用

此篇关于AngularJS ui-sref的简单使用,最近刚好学习,就顺便发到随笔上了具体用法: <a ui-sref="man">男人</a> 这是一个非常简单的ui-sref的使用,当JavaScript重新生成网页时,它会查找$state中名为"man"的state,读取这个state的url,然后在a标签里生成href="url" rel="external nofollow" , 结果为:
详解AngularJS中$filter过滤器使用(自定义过滤器)

1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般
详解angularjs获取元素以及angular.element()用法

本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下: addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选
详解AngularJS中的表单验证(推荐)

AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证正则式验证只需要配置一个正则式,很方便的完成验证,理论上所有的验证都可以用正则式完成 //javascript $scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$"; $scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?
详解AngularJS ng-class样式切换

整理文档,搜刮出一个详解AngularJS ng-class样式切换,稍微整理精简一下做下分享. 1.HTML <ion-view> <ion-content> <div class="button-bar"> <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isFirst]" ng-click="isFirst = !isFirst"&g
详解log4j.properties的简单配置和使用

本文介绍了详解log4j.properties的简单配置和使用,分享给大家,具体如下: 简单log4j.properties配置示例 ### set log levels ### log4j.rootLogger = INFO , console , debug , error ### console ### log4j.appender.console = org.apache.log4j.ConsoleAppender log4j.appender.console.Target = Syst
详解angularjs实现echart图表效果最简洁教程

本文介绍了详解angularjs实现echart图表效果最简洁教程,分享给大家,具体如下: ehcart是百度做的数据图表,基于原生js.接口和配置都写的很好很易读,还可以用于商用. 一 echart包引用下载解压,放入lib中. 下载地址:echart_jb51.rar 并在index.html中引用如图两个js文件. app.js中引用angular-echarts 二页面 html页面  <div> <donut-chart config=&quo
详解mysql查询缓存简单使用

MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RDBMS (Relational Database Management System,关系数据库管理系统) 应用软件之一. 当我们开启Mysql的查询缓存,当执行完全相同的SQL语句的时候,服务器就会直接从缓存中读取结果.当数据被修改, 之前的缓存会失效,所以修改比较频繁的表不适合做查询缓存. 一.查询
详解angularjs 学习之 scope作用域

简介 Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个存储应用数据模型的对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 作用域是Web应用的控制器和视图之间的粘结剂: 控制器 --> 作用域 --> 视图(DOM) 指令 --> 作用域 --> 视图(DOM) 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递: <div ng-controller=

详解AngularJs与SpringMVC简单结合使用

相关推荐

随机推荐