Spring Angularjs HelloWorld

AngularJS è un popolare framework javascript, creato e mantenuto da Google, per applicazioni mobile e rich user interfaces.
Questo tutorial illustra come utilizzare e integrarlo con Spring MVC.
In particolare si mostrerà come accedere al controller Spring MVC e visualizzare i dati di un bean.

Creazione Progetto

Dal meù File/New/Other  cliccare su “Maven Project” 

Selezionare  “Create a simple project (skip archetype selection)“

Inserire i seguenti valori:
Group ID: iljavarolo
Artifact ID: SpringMVCAngular
Packaging: war

Cliccare su “Finish“

Il progetto creato dovrebbe avere una struttura del genere:

Se non esiste la cartella WEB-INF crearla.

 

Configurazione Spring

pom.xml

 

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>iljavarolo</groupId>
	<artifactId>SpringMVCAngular</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>

	<dependencies>
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>3.8.1</version>
			<scope>test</scope>
		</dependency>


		<!-- Servlet API -->
		<!-- http://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>3.1.0</version>
			<scope>provided</scope>
		</dependency>


		<!-- Jstl for jsp page -->
		<!-- http://mvnrepository.com/artifact/javax.servlet/jstl -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>


		<!-- JSP API -->
		<!-- http://mvnrepository.com/artifact/javax.servlet.jsp/jsp-api -->
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>jsp-api</artifactId>
			<version>2.2</version>
			<scope>provided</scope>
		</dependency>
 <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-core</artifactId>
        <version>2.2.3</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.2.3</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-annotations</artifactId>
        <version>2.2.3</version>
    </dependency>


		<!-- Spring dependencies -->
		<!-- http://mvnrepository.com/artifact/org.springframework/spring-core -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-core</artifactId>
			<version>4.1.4.RELEASE</version>
		</dependency>

		<!-- http://mvnrepository.com/artifact/org.springframework/spring-web -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-web</artifactId>
			<version>4.1.4.RELEASE</version>
		</dependency>

		<!-- http://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>4.1.4.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>angularjs</artifactId>
			<version>1.3.8</version>
		</dependency>


	</dependencies>



	<build>
		<finalName>SpringMVCAngular</finalName>
		<plugins>

			<!-- Config: Maven Tomcat Plugin -->
			<!-- http://mvnrepository.com/artifact/org.apache.tomcat.maven/tomcat7-maven-plugin -->
			<plugin>
				<groupId>org.apache.tomcat.maven</groupId>
				<artifactId>tomcat7-maven-plugin</artifactId>
				<version>2.2</version>

				<!-- Config: contextPath and Port (Default - /SpringMVCResource : 8080) -->

				<!-- <configuration> <path>/</path> <port>8899</port> </configuration> -->
			</plugin>
		</plugins>
	</build>
</project>

web.xml

<web-app xmlns="http://java.sun.com/xml/ns/javaee"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
         http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
   version="3.0">
 
   <display-name>Archetype Created Web Application</display-name>
   <servlet>
       <servlet-name>spring-mvc</servlet-name>
       <servlet-class>
           org.springframework.web.servlet.DispatcherServlet
       </servlet-class>
       <load-on-startup>1</load-on-startup>
   </servlet>
 
   <servlet-mapping>
       <servlet-name>spring-mvc</servlet-name>
       <url-pattern>/</url-pattern>
   </servlet-mapping>
 
   <!-- Other XML Configuration -->
   <!-- Load by Spring ContextLoaderListener -->
   <context-param>
       <param-name>contextConfigLocation</param-name>
       <param-value>
          /WEB-INF/root-context.xml
        </param-value>        
   </context-param>
 
 
   <!-- Spring ContextLoaderListener -->
   <listener>
       <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
   </listener>
 
</web-app>

da notare che nel web.xml si definiscono i due file di configurazione di Spring

•          /WEB-INF/spring-security.xml
•          /WEB-INF/root-context.xml

Inoltre, la DispatcherServlet di Spring leggerà il suo file di configurazione in base al principio {servlet-name} ==> /WEB-INF/{servlet-name}-servlet.xml, quindi in questo caso la servlet name vale “spring-mvc”   e il file avrà il nome di “spring-mvc-servlet.xml“

root-context.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"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans.xsd">
 
   <!-- Empty -->
 
</beans>

spring-mvc-servlet.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:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
      http://www.springframework.org/schema/beans/spring-beans-4.1.xsd  
      http://www.springframework.org/schema/context
      http://www.springframework.org/schema/context/spring-context-4.1.xsd  
      http://www.springframework.org/schema/mvc
      http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd">
 
    <!-- Package Scan -->
    <context:component-scan base-package="com" />
     
    <!-- Enables the Spring MVC Annotation Configuration -->
    <context:annotation-config />
     
    <!-- Important!! -->
    <!-- Default Servlet Handler (For Resources *.css, *.js, image,..) -->
    <mvc:default-servlet-handler />
       <mvc:annotation-driven />    
 
    <!-- Config resource mapping -->
    <mvc:resources mapping="/styles/**" location="/WEB-INF/resources/css/" />
     
	<bean id="userDetails" class="com.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>

BackEnd

Dentro SpringContentController ci sono due metodi.
Il primo (angular) ha l annotation @RequestMapping(value=”/angular”, quindi qualsiasi url del tipo “/angular” richiamerà questo metodo.
Il secondo ha sempre l’annotation @RequestMapping(value=”/springcontent” ma anche @ResponseBody, allora tutte le richieste del tipo “/springcontent” restituiranno un xml, in formato JSON, rappresentante la classe UserDetails

SpringContentController.java

package com;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
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("Pippo");
		userDetails.setEmailId("pippo@gmail.com");
		return userDetails;
	}
	
    @RequestMapping(value = "/angular")
    public String angular(Model model) {
        return "angular";
    }
}

UserDetails.java

package com;

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;
	}
}

FrontEnd

E’ presenta un’unica pagina jsp come vista, all’interno della quale vengono utilizzate delle semplici funzioni di angular per mostrare i dati del UserDetails, recuperati tramite lo script function Hello($scope, $http).

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/SpringMVCAngular/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>

Build  Applicazione

Buildare l’intero progetto, cliccando su run As–>Maven Install

Avvio Applicazione

Se tutto è stato fatto correttamente, digitando il seguente url nel browser:
localhost:8080SpringMVCAngular/springcontent

si otterrà un xml di risposta in formato JSON

Digitando:
localhost:8080/SpringMVCAngular/angular

verranno mostrate le proprieta dell oggetto userdetails

Download sorgenti intero progetto