Spring MVC + AngularJS Integration

本文介绍如何将SpringMVC与AngularJS结合使用,通过实例展示如何在AngularJS视图层调用SpringMVC控制器显示数据,以及如何在AngularJS中处理JSON数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

This tutorial illustrates how to use or integrate the Spring MVC and AngularJStogether. AngularJS is popular JS framework for building the single page web applications. Also most of the mobile applications and rich user interfaces are using the AngularJS framework. Here we will show how to use this framework in the view layer and access the Spring MVC controller to display the data. AngularJS framework is created and maintained by Google.

In this Spring MVC and AngularJS example, data returned from server is in the type of JSON, that will be assigned to the AngularJS object and will display to the user. Lets look at the example.

1. Spring MVC Controller

SpringContentController.java

package javabeat.net.spring.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Controller;
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.bind.annotation.ResponseStatus;

@Controller
public class SpringContentController {
  @Autowired UserDetails userDetails;
  @RequestMapping(value="/springcontent",
      method=RequestMethod.GET,produces={"application/xml", "application/json"})
  @ResponseStatus(HttpStatus.OK)
  public @ResponseBody
  UserDetails getUser() {
    UserDetails userDetails = new UserDetails();
    userDetails.setUserName("Praveen");
    userDetails.setEmailId("praveen@gmail.com");
    return userDetails;
  }
}

2. Java Bean

UserDetails.java

package javabeat.net.spring.controller;

import javax.xml.bind.annotation.XmlAttribute;
import javax.xml.bind.annotation.XmlRootElement;

@XmlRootElement
public class UserDetails {
  private String userName;
  private String emailId;

  @XmlAttribute
  public String getUserName() {
    return userName;
  }

  public void setUserName(String userName) {
    this.userName = userName;
  }

  @XmlAttribute
  public String getEmailId() {
    return emailId;
  }

  public void setEmailId(String emailId) {
    this.emailId = emailId;
  }
}

3. Spring Configurations

spring-dispatcher-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:mvc="http://www.springframework.org/schema/mvc"
  xmlns:context="http://www.springframework.org/schema/context"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans-3.0.xsd


http://www.springframework.org/schema/mvc


http://www.springframework.org/schema/mvc/spring-mvc.xsd


http://www.springframework.org/schema/context


http://www.springframework.org/schema/context/spring-context-3.0.xsd">

  <context:component-scan base-package="javabeat.net.spring.controller" />
  <bean id="userDetails" class="javabeat.net.spring.controller.UserDetails"/>
  <mvc:annotation-driven content-negotiation-manager="contentManager"/>
  <bean id="contentManager"
  class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean">
  <property name="favorPathExtension" value="true"/>
  <property name="ignoreAcceptHeader" value="true" />
  <property name="defaultContentType" value="text/html" />
  <property name="useJaf" value="false"/>
  <property name="mediaTypes">
    <map>
        <entry key="html" value="text/html" />
        <entry key="json" value="application/json" />
        <entry key="xml" value="application/xml" />
    </map>
  </property>
        </bean>
  <bean id="jspViewResolver"
    class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/jsp/" />
    <property name="suffix" value=".jsp" />
  </bean>
</beans>

4. AngularJS View

This is very simple use of the AngularJS framework. The function “Hello” can be added to the JS controler which is best practice. However, for the simplicity we have used inside the JSP page.

angular.jsp

<!doctype html>
<html ng-app>
  <head>
    <title>Spring MVC + AngularJS Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script>
    function Hello($scope, $http) {
      $http.get('http://localhost:8080/SpringExamples/springcontent.json').
        success(function(data) {
          $scope.user = data;
        });
    }
    </script>
  </head>
  <body>
    <div ng-controller="Hello">
      <h2>Spring MVC + AngularJS Demo</h2>
      <p>EMail Id : {{user.emailId}}</p>
      <p>User Name : {{user.userName}}</p>
    </div>
  </body>
</html>

5. Spring MVC + AngularJS Example



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值