Spring MVC + AngularJS-Integration

Erstellen Sie Ihre REST-API mit Spring – VIDEO-Kursen

Dieses Tutorial zeigt, wie Sie das verwenden oder integrieren Spring MVC und AngularJS zusammen. AngularJS ist ein beliebtes JS-Framework zum Erstellen von Single-Page-Webanwendungen. Auch die meisten mobilen Anwendungen und umfangreichen Benutzeroberflächen verwenden das AngularJS Rahmen. Hier zeigen wir, wie Sie dieses Framework in der Ansichtsebene verwenden und auf den Spring MVC-Controller zugreifen, um die Daten anzuzeigen. Das AngularJS-Framework wird von Google erstellt und verwaltet.

Wenn Sie Fragen haben, schreiben Sie diese bitte in den Kommentarbereich oder posten Sie sie auf unserer Facebook-Seite.

In diesem Spring MVC- und AngularJS-Beispiel liegen die vom Server zurückgegebenen Daten im JSON-Typ vor, der dem AngularJS-Objekt zugewiesen und dem Benutzer angezeigt wird. Schauen wir uns das Beispiel an.

lesen Sie auch:

  • Frühlings-Tutorials
  • Einführung in Spring MVC
  • Frühlings- und Ruhezustandsintegration

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("(email protected)");
		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. Federkonfigurationen

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"  />
	<mvc:annotation-driven content-negotiation-manager="contentManager"/>
	<bean id="contentManager"
                 >
                <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"
		 >
		<property name="prefix" value="/WEB-INF/jsp/" />
		<property name="suffix" value=".jsp" />
	</bean>
</beans>

4. AngularJS-Ansicht

Dies ist eine sehr einfache Verwendung des AngularJS-Frameworks. Die Funktion „Hallo“ kann dem JS-Controller hinzugefügt werden, was eine bewährte Methode ist. Der Einfachheit halber haben wir jedoch die Innenseite der JSP-Seite verwendet.

angle.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-Beispiel

Wenn Sie den obigen Beispielcode ausführen, erhalten Sie den folgenden Bildschirm.

Beispiel für die Integration von Spring MVC und AngularJS

(wpdm_file id=91)

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen