Web Programming TutorialsLearn to Create Applications using Spring boot and AngularJS

Learn to Create Applications using Spring boot and AngularJS

Developing software applications, especially enterprise applications, has become easier with Spring and AngularJS. Then there are the REST APIs, which, though is not the subject of this article, play an important role as well. Any software application has two parts: server and client. The Spring Boot helps set up the server and performs many related activities while the AngularJS helps set up the front end and interactive aspects of the software application. AngularJS also specializes in setting up the Single Page Applications (SPA) which have a relatively powerful client. The client-server interaction is what the software application is about. The website services or APIs – RESTful APIs have been popular – play an important role in the client-server interaction.

Why Spring Boot?

Everything comes with a drawback, though Spring Framework helps you develop awesome applications, there is one hard part about it and that is its – configuration. In order to have Spring work at its best, you need to configure it correctly which is a complex task. Spring Boot takes the hard and tedious part of configuration out of your action items so that you can build an application that gets started right away. According to the Spring Boot website, “Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that you can “just run”. We take an opinionated view of the Spring platform and third-party libraries, so you can get started with minimum fuss. Most Spring Boot applications need very little Spring configuration.”

How does Spring Boot reduce your work?

The following capabilities allow Spring Boot to reduce your work and have you focus on developing the software instead.

Opinion An Opinion is a Spring Boot default you can use to develop the application. Spring Boot provides many of them. The defaults contain the configuration that otherwise you would have needed to set up manually. For example, Tomcat is a widely used web container. By default, a Spring Boot web application uses an embedded Tomcat container.
Customizable opinions You can customize the opinions, if needed, at any stage of development. For example, if you need Maven, you can replace the Spring Boot default value by making changes in the POM file.
Starter A Starter is a type of dependency that allows you to develop software applications without any need of setting up the complex configuration. Spring Boot offers different Starter types. You can choose a Starter based on the type of software application you want to develop. The format of a Starter is spring-boot-starter-XYZ where XYZ is the type of software you want to build. For example, the spring-boot-starter-web is used to build RESTful web services.

Why AngularJS is so popular?

From the perspective of businesses, mobile-friendly apps and websites have become critical to businesses. People now tend to access websites and apps on their mobile devices and so, it is critical to offer good user experience accordingly. At the same time, desktop websites and apps are also important. So, businesses need a hybrid approach towards application and website development. AngularJS offers just the right approach towards its hybrid website and application development. Businesses also want rapid application development and good user experience. AngularJS is more than other JavaScript Frameworks such as Node.js, Ember.js and react.js.

What is AngularJS?

AngularJS is an open source JavaScript Framework from Google. Its defining features are:

Extensibility. It embraces and extends the capabilities of HTML, CSS and JavaScript. So, learning curve is not steep. You should have knowledge of HTML, CSS and JavaScript to get going quickly.
Flexibility. While it provides libraries, functions and methods aimed at application development, you can customise them based on your unique needs.
Quick application development. Extensibility and flexibility already expedites application development. Since AngularJS is aimed at client-side applications, recurring interactions with the server is not needed and that saves time, speeds up development and offers good user experience.

Role of Spring Boot

If you want to quickly develop quality software applications then Spring Framework can act as a boon. However, what you might not like the complex configurations you need to set up to enable the Spring Framework function to start working. You not only want quality software applications but also minimal hassles and speedy development. Complex configurations can slow down application development.

Spring Boot is enabling faster software development by doing for you most of the required configurations. Its role can be summed up in the following points.

Minimal configuration effort. Spring Boot does most of the configuration for you and makes you independent for your core job.
Components for speedy development. Spring Boot provides Opinions and Starters, already discussed earlier in this article, for speedy software development. The components are also customizable. If you need, Spring Boot also offers auto configuration features which allows it to automatically set up the configuration without human intervention.

Role of AngularJS

Modern day business requirements have been changing. Businesses want faster and hassle-free application development for frequent releases; better performance and user experience and lesser learning curve. Clearly, all requirements owe their roots to speedier software delivery and faster iterations without quality compromise. As per the given requirements, the role of AngularJS can be summed up in the following points.

Open source JavaScript Library. AngularJS provides functions, methods and libraries for ready made use of software projects. You can also customise them based on unique project requirements. This saves you the effort of bootstrapping projects and writing boilerplate code.
Minimal learning curve. AngularJS embraces and extends HTML, CSS and JavaScript capabilities. It is easy for web designers and developers to learn and get started quickly.
Better user experience. AngularJS is aimed at clients. It prevents frequent page-loading and puts lesser burden on the server. Faster page loading results in good user experience.

How this combination works?

The preceding sections provide information on the individual roles of both Spring Boot and AngularJS in software development and operation. However, to have the software run smoothly, both need to work together. While the Spring Boot works on the backend or the server front, the AngularJS works on the frontend and one or more web services or APIs are placed in between. The APIs act as the interface between the two, passing requests from the client in a specific format to the server and delivering the response to the client.

Sample application code
In this section, we will build an application using Spring boot and AngularJS. We will be using Java 7/8, Spring boot (version 1.5.3) and AngularJS (version 1.5.6). These are all latest and stable versions.
Now, let us write all the components one by one.
First, we will have a pom.xml file, which will show all the dependencies required in this project.
Listing 1: – Sample pom.xml file

[code]
<?xml version="1.0" encoding="UTF-8"?>
<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>springboot-angularjs</groupId>
    <artifactId>springboot-angularjs</artifactId>
    <version>1.0-SNAPSHOT</version>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.3.RELEASE</version>
    </parent>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>angularjs</artifactId>
            <version>1.5.6</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>3.3.6</version>
            <scope>runtime</scope>
        </dependency>
    </dependencies>
</project>
[/code]

Now, we will check the Spring boot application class. This class will bootstrap the application and strat from the main() method.

Listing 2: – Sample Spring boot application class

[code]
package com.eduonix.examples;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
@Configuration
@EnableAutoConfiguration
@ComponentScan("com.eduonix.examples")
public class SpringBootInitializer{
    public static void main(String[] args) throws Exception{
        SpringApplication.run(SpringBootInitializer.class, args);
    }
}
[/code]

Following is a sample controller class for request mapping and rendering to an html file.

Listing 3: – Sample controller class

[code]
package com.eduonix.examples;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class SpringBootController {
    @RequestMapping(value="/",method = RequestMethod.GET)
    public String homepage(){
        return "index";
    }
}
[/code]

Now, we will write the html file with AngularJS components embedded.

Listing 4: – Sample HTML file

[code]
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Spring boot and Angularjs Application</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
<h2>Student Section</h2>
<div class="home-section">
    <ul class="menu-list">
        <li><a href="#/students">Students</a></li>
        <li><a href="#/subjects">Subjects</a></li>
    </ul>
</div>
<div ng-view></div>
<script src="/webjars/angularjs/1.5.6/angular-route.js"></script>
<script src="/webjars/angularjs/1.5.6/angular.js"></script>
<script src="/webjars/angularjs/1.5.6/angular-resource.js"></script>
<script src="/js/controller.js"></script>
<script src="/js/app.js"></script>
<link rel="stylesheet" href="/webjars/bootstrap/3.3.6/css/bootstrap.css">
</body>
</html>
[/code]

Following are the JS files which are included in the previous HTML file.

Listing 5: – Sample app.js file

[code]
var app = angular.module('app', ['ngRoute','ngResource']);
app.config(function($routeProvider){
    $routeProvider
        .when('/students',{
            templateUrl: '/views/student.html',
            controller: 'studentController'
        })
        .when('/subjects',{
            templateUrl: '/views/subjects.html',
            controller: 'subjectsController'
        })
        .otherwise(
            { redirectTo: '/'}
        );
});
[/code]

Listing 6: Sample controller.js file

[code]
app.controller('studentController', function($scope) {
    $scope.headingTitle = "Student List";
});

app.controller('subjectsController', function($scope) {
    $scope.headingTitle = "Subject List";
});
[/code]

Now, we will have the HTML files for students and subjects.

Listing 7: – Sample HTML files.
This is students.html file

[code]
<div class="section">
    <h3>{{headingTitle}}</h3>
    <div>
        <ul type="square">
            <li>Kaushik</li>
            <li>Manish</li>
            <li>John</li>
            <li>David</li>
        </ul>
    </div>
</div>
[/code]

This is subjects.html file

[code]
<div class="section">
    <h3>{{headingTitle}}</h3>
    <div>
        <ul type="square">
            <li>Physics</li>
            <li>Chemistry</li>
            <li>Maths</li>
            <li>Geography</li>
        </ul>
    </div>
</div>
[/code]

We have almost completed the application. You just need to build the application and run it. Use the following commands one by one to deploy and run the application on the Tomcat server.
mvn clean install
mvn spring-boot:run
Now, open the following links on any browse, and it will show students and subjects list.
localhost:8080/index.html#/students
localhost:8080/index.html#/subjects

Conclusion: –
Businesses need quality software delivered faster. In this context, the Agile methodology of software development deserves a special mention. Obviously, there is little time for traditional software development methods such as bootstrapping. Both Spring Boot and AngularJS enables higher developer productivity in this context.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -