The combination of Spring MVC & 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 (Spring MVC & AngularJS).
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.
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:
Integrating Spring MVC & AngularJS
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.eduonix.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("[email protected]");
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.eduonix.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.eduonix.spring.controller" />
<bean id="empDetails" class="com.eduonix.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]
Spring MVC And AngularJS Demo
Employee Name : {{emp.userName}}
EMail Id : {{emp.emailId}}
[/code]
Now run the page in browser. Following will be the output.
Spring MVC And AngularJS Demo
Employee Name: DemoUser
EMail Id: [email protected]
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.
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.
