Steps to integrate Spring MVC and AngularJS
Overview
The combination of Spring MVC and AngularJS is one of the most powerful combinations to create quality web-based applications. This is especially applicable in building dynamic web apps or Single Page Applications. Certain features like modularity, open source, flexibility and loose coupling are common between the two client and server components. They are also responsible for making the web application run without glitches. There are a few challenges that are mentioned later in this article but that does not reduce the quality offered by the two frameworks.
What is Spring MVC?
The Spring Model View Controller (MVC) is a framework that facilitates the development of web-based applications. While there are other frameworks as well, Spring MVC’s uniqueness is in its flexibility and modularity. While its components work together to produce a quality web application, each component can be treated as independent and loosely coupled. This means that each component is replaceable and compatible with any component you choose to bring in. Though there are three types of logic — input logic, business logic, and UI logic – in the framework, all are independent and loosely coupled. The main components of the Spring MVC are described below:
- Model: This encapsulates the web application data and usually the web application data comprises the Plain Old Java Object (POJO).
- View: The View component renders the model data and as a result, it generates the HTML output. The client browser is generally able to process and interpret the HTML generated by the View component.
- Controller: The Controller component receives the user requests or inputs, processes the same and passes it to the View component for rendering.
What is Angular JS?
The AngularJS is an open source, front-end JavaScript framework that allows front end developers to use JavaScript to add interactivity to their webpages.
Developing the Single Page Applications (SPA) has been a challenging task for front-end developers for various reasons. AngularJS, developed as an open source front-end web application framework by Google aims to solve such problems faced by the front-end developers. AngularJS allows both development and testing of SPAs and provides a framework for the client-side model–view–controller (MVC) and model–view–view model (MVVM) architectures, as well as components that are commonly used in rich Internet applications.
AngularJS has been a popular product and is already being used by several reputed organizations such as NBC, Wolfram Alpha, Intel, Walgreens, Sprint and ABC News. According to sources, AngularJS is in the top 100 of the most starred or favorite projects on GitHub.
Must watch – Spring boot video tutorials
Integration Principles
This section discusses the main principles or approach towards the integration of Spring MVC with AngularJS. Before integrating, it needs to be understood that the roles of both Spring MVC and AngularJS are different though the objective is the same. While the Spring MVC will provide a framework that works for the server-end of the web-based application, the AngularJS will be working on the client or front-end of the application. The main principles are:
· Modularity agreement
Both the Spring MVC and AngularJS are developed on the basis of modularity which means that individual modules are loosely coupled and replaceable. However, this needs to be kept in mind that when a module is updated or replaced in the server or client end, the other component is compatible with the change, else it will severely disrupt the data flow. So, software architects and designers need to be vigilant and careful about modular compatibility.
· Information flow
Information flow is critical to the success of the client-server model as is the compatibility of the MVC frameworks of both the Spring MVC and AngularJS. Lack of compatibility will result in errors and the user experience can be disastrous.
· Data type Support
The architecture and design at both the server and client ends must support the same data types and for that, both the Spring MVC with AngularJS frameworks need to be compatible with various data types. Not only that, as new data types get added to the system, the compatibility must be upward mobile.
Integrating Spring MVC with Angular JS (Code)
In this section, we will build a sample application integrating Spring MVC and AngularJS. The first component is a controller file described below.
Listing 1: Sample controller file
[code]
package com.techalpine.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 SpringDemoController {
@Autowired EmpDetails empDetails;
@RequestMapping(value=”/springcontent”,
method=RequestMethod.GET,produces={“application/xml”, “application/json”})
@ResponseStatus(HttpStatus.OK)
public @ResponseBody
EmpDetails getUser() {
EmpDetails empDetails = new EmpDetails();
empDetails.setUserName(“DemoUser”);
empDetails.setEmailId(“demouser@gmail.com”);
return empDetails;
}
}
[/code]
Following is a POJO class for employee details. It will have setter and getter methods.
Listing 2: Sample POJO class (Employee details)
[code]
package com.techalpine.spring.controller;
import javax.xml.bind.annotation.XmlAttribute;
import javax.xml.bind.annotation.XmlRootElement;
@XmlRootElement
public class EmpDetails {
private String empName;
private String emailId;
@XmlAttribute
public String getEmpName() {
return empName;
}
public void setEmpName(String empName) {
this.empName = empName;
}
@XmlAttribute
public String getEmailId() {
return emailId;
}
public void setEmailId(String emailId) {
this.emailId = emailId;
}
}
[/code]
Now the third component is a dispatcher servlet xml file containing all the mappings.
Listing 3: Dispatcher servlet
[code]
<?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=”com.techalpine.spring.controller” />
<bean id=”empDetails” class=”com.techalpine.spring.controller.EmpDetails”/>
<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>
[/code]
This is the front end component which is a AngularJS page.
Listing 4: Sample AngularJS page
[code]
<!doctype html>
<html ng-app>
<head>
<title>Demo Application Using Spring MVC & gularJS</title>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js”></script>
<script>
function HelloAngular($scope, $http) {
$http.get(‘http://localhost:8080/SpringExamples/springcontent.json’).
success(function(data) {
$scope.emp = data;
});
}
</script>
</head>
<body>
<div ng-controller=”HelloAngular”>
<h2>Spring MVC And AngularJS Demo</h2>
<p>Employee Name : {{emp.userName}}</p>
<p>EMail Id : {{emp.emailId}}</p>
</div>
</body>
</html>
[/code]
Now run the page in browser. Following will be the output.
Spring MVC And AngularJS Demo
Employee Name: DemoUser
EMail Id: demouser@gmail.com
Limitations and problems
The main challenge comes when a single organization is tasked with the responsibility of managing both the client and server. Both the Spring MVC and AngularJS are versatile components and capable of accepting various modules. Now, it is a huge challenge to find and maintain compatible components and versions of software and logical units so that the client and server interact seamlessly. Often, when the various components are replaced or updated, it may be difficult to make sure that the new component is compatible.
You will also like to read – Interesting articles on Spring framework
Conclusion
Challenges notwithstanding, the combination of the two frameworks still provides the best way to develop great web apps. From the perspective of software developers, the open source applications are an irresistible proposition as are the power-packed features.
