RESTful web services, Spring and AngularJS can work together to help develop a quality software application. The relationship among them can be clearly defined. You can use Spring to develop software applications – especially Java applications – relatively easily and quickly while AngularJS helps put together the frontend and the interactive aspects of the software application. As you do this, you are also developing a client-server relationship in the process. The client server relationship is maintained both internally and externally. Internally, when the frontend or the client communicates with the server and externally, when the software communicates with diverse systems such as websites and mobile devices. RESTful web services facilitate seamless communication between systems. RESTful web services are based on HTTP principles which makes it compatible with a wide array of systems. Both Spring and AngularJS are compatible with RESTful web services.
REST API and Spring
This section will explore the relationship between Spring and REST API and find out how both can work together. Note that this section does not intend to define both entities as much as it finds out the compatibilities and common working methodology. The goal of Spring is to facilitate development of Java-based software applications while that of the REST API is to organize interactions between systems. With Spring, you can set up the server and the database part of the software application which will interact with one or more client types. The beauty about Spring-based applications is that they can interact with almost any client type regardless of platform or technology. The REST API enhances the interaction capabilities of Spring-based software applications. When the server and database are set up, their quality will be measured by how well they respond to client requests. REST-based interfaces allow seamless client-server interaction regardless of technology and platform.
What is Angular JS?
The AngularJS, commonly referred to as Angular, is an open source JavaScript framework from Google which is used to develop the front end and interactive aspects of web-based applications, especially the Single Page Applications (SPA). Like in any framework, AngularJS provides ready-made components for use in the web applications which reduces time and effort, allows quality testing and contributes to quality software applications. Though it is suitable for all web-based applications, it has been widely used in developing SPAs. AngularJS powers reputed sites like Virgin America, Google and the iPad app of HBO. There are many JavaScript frameworks available in the market such as JQuery, BackboneJS, KnockoutJS, KendoUI and EmberJS. However, AngularJS offers a slight advantage.
Advantages of AngularJS Client
As mentioned in the earlier section that many JavaScript frameworks are available. So, apart from the fact that it is open-source, what is the unique selling point of AngularJS? Consider the following points.
Understanding Content Markups
Compared to other frameworks such as the JQuery, it is easier to understand or distinguish the presence of markups in the Document Object Model (DOM) in Angular. For example, if you want to insert a dynamic element such as a date picker on a static HTML page with JQuery, you need to use the $(element).datePicker(). However, it is difficult to understand the input field looking at the markup. With Angular, it is easy to understand just by looking at the input field.
Two-Way Data Binding
When there is any update in the model or back end, the view should be updated. The effort to do this in JQuery is more than that in Angular. In JQuery, you need to write the logic both in the model and the view layer whereas in Angular, you just need to bind the variable $scope.
Template management
In Angular, you can create templates for reusable blocks and then use the templates many times.
Easy testing
It is easy to write basic flows for end to end and unite tests.
How to work with REST API with Spring and Angular JS?
Working with REST API is easy because it is compatible with most systems. The goal is to develop a quality software application with optimized time and effort. When you keep this goal in mind, the roles of REST API, Spring and Angular are clearly defined.
REST API
The role of this component is to organize interactions between the client and the server. These web services can facilitate interactions between diverse servers and client types such as the mobile clients. The REST API is based on the HTTP principles of noun and verb. There are two principal parts of an API, the header and the body. You need to specify the type of resource with a noun and the type of action with a verb. For example, if you want to retrieve a list of companies, you can specify the noun with the URL name and the verb Get. This principle works across systems.
Spring
The role of this component is to provide a framework for easy development of a software application so that the server and the database can be set up. The Spring Framework provides libraries, functions and methods that speed up development, reduces effort and resource and facilitates easy testing. The server and the database will be using the REST APIs for interacting with clients.
AngularJS
The role of this component is to provide a framework for easy development of frontend and interactive aspects of a web-based client. This is especially useful for SPAs. The RESTful APIs will reside in the middle of the client and the server and act as the interface facilitating requests and responses. In case of SPAs, the browser will be the main component that interacts with the server. It will be using nouns and verbs, the main components of RESTful web services is to get the response from the web server.
Code Implementation
In this article, we will consume RESTful web service from AngularJS client application by using the Spring framework. So, we will have three components here.
AngularJS client application
RESTful web service
Spring framework
Here, we will access the AngularJS client from one html page. For RESTful web service, we will be using open end point provided by “rest-service.guides.spring.io” service URL.
Now, let us build all the components one by one.
Here we will write the JS code with AngularJS components. These AngularJS components will receive the response from the RESTful web service.
Listing 1: – AngularJS Controller (Controller.js)
[code]
angular.module('test', [])
.controller('HelloAngular', function($scope, $http) {
$http.get('http://rest-service.guides.spring.io/greeting').
then(function(response) {
$scope.greeting = response.data;
});
});
[/code]
Following is the sample html page for using the AngularJS controller and displaying the output on a browser.
Listing 2: – Application page (index.html)
[code]
<!doctype html>
<html ng-app="test">
<head>
<title>Demo AngularJS With Spring REST</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="Controller.js"></script>
</head>
<body>
<div ng-controller="HelloAngular">
<p>Value of ID is :{{greeting.id}}</p>
<p>Value of content is: {{greeting.content}}</p>
</div>
</body>
</html>
[/code]
Now, we need to run the server. Any web server can be started to serve the html page and render the output on a browser page. Here, we will be running default Tomcat server (Spring boot) and then run the client.
After running the server, if we open http://localhost:8080 in a browser, it will display the following output.
Value of ID is: – 99
Value of content is: – Hello, World!
The ID value will keep on changing upon multiple request.
Conclusion: –
AngularJS specializes in the development of SPAs. In the context of complex applications where there is huge load on resources, recurring loading of pages is not desirable. In this context SPAs are great. REST APIs combine with AngularJS and Spring to create powerful applications fitted to modern day needs.
