ANGULAR 6 WITH SPRINGBOOT APPLICATION

AN INDUSTRIAL INTERNSHIP REPORT

submitted by

NATESH BALAJI
15BCE1049

in partial fulfillment for the award of the degree of

BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE AND ENGINEERING

AUGUST,2018

1
 School of Computing Sciences and Engineering

DECLARATION BY THE CANDIDATE

I hereby declare that the Industrial Internship Report entitled “ANGULAR 6

WITH SPRINGBOOT APPLICATION” submitted by me to VIT University,
Chennai in partial fulfillment of the requirement for the award of the degree of
Bachelor of Technology in Computer Science and Engineering is a record of
bonafide industrial training undertaken by me under the supervision of Mr.Jai
Thilak. I further declare that the work reported in this report has not been
submitted and will not be submitted, either in part or in full, for the award of
any other degree or diploma in this institute or any other institute or university.

Chennai Signature of the Candidate

Date:

2
 School of Computing Sciences and Engineering

BONAFIDE CERTIFICATE

This is to certify that the Industrial Internship Report entitled “ANGULAR 6

WITH SPRINGBOOT APPLICATION” submitted by Natesh
Balaji(15BCE1049) to VIT University, Chennai in partial fulfillment of the
requirement for the award of the degree of Bachelor of Technology in
Computer Science and Engineering is a record of bonafide internship
undertaken by him/her fulfills the requirements as per the regulations of this
institute and in my opinion meets the necessary standards for submission. The
contents of this report have not been submitted and will not be submitted either
in part or in full, for the award of any other degree or diploma in this institute or
any other institute or university.

Dr. Rajesh Kanna

Internship Coordinator Programme Chair (B. Tech CSE)
Date:

Examiner (s) Signature

1. 2.

3
COMPLETION CERTIFICATE-

4
 ACKNOWLEDGEMENT-

The time I spent in L&T Thales Technology Services as an intern from May
2018 to June 2018 was a memorable one for me as it was rich in experience
sharing and helped me discover my potential. I have had so many rich
experiences and opportunities that I personally believe will forever shape and
influence my professional life while fostering personal growth and
development.

I wish to express my sincere gratitude to Mr. Jaykumar, HR Manager for

providing me an opportunity to do my internship work for a period of 1 month
in “Larsen & Toubro Thales Technology Services Limited.”

I sincerely thank Mr. Jai Thilak for his encouragement and guidance in carrying
out the Project Work. He had the kindness to accept me in his team and guide
me throughout my internship with advice and feedback despite his busy
schedule. I would also like to thank the rest of the staff for their support and
guidance which helped me to overcome the challenges I faced during the 1
month in L&T Thales Technology Services.

Last but not least, special thanks to all my friends for sharing their experiences,
time and commitment especially during finishing this internship program. I am
grateful because I have a lot of friends who were always there for me to help
and support me throughout the course of completing the internship program.

Natesh Balaji

5
 TABLE OF CONTENTS

Chapter Title Page

Declaration 2
Bonafide Certificate 3
Completion Certificate 4
Acknowledgement 5
Table of contents 6
Table of Figures 7
Abstract 8

1 Introduction 9
1.1 Problem Statement
1.2 About the Project
1.3 Motivation
1.4 About the Company
1.5 Post/Related Work
1.6 Challenges
1.7 Homepage

2 Design and Implementation 10

2.1 Design/Modules
2.2 Architecture
2.3 Implementation
2.3.a. SpringBoot
2.3.b. Angular 6
2.4 Screenshots

3 Results and Conclusion 24

4 References 25

TABLE OF FIGURES-

6
Figure No- Title Page No-
1. Layout of Home Page 11
2. Angular 6 Architecture 13
3. Advantages of Angular 6 14
4. Flowchart for General Car Sales Procedure 15
5. Spring Logo 16
6. Annotation Based Configuration 17
7. Application Based Configuration 17
8. Angular 6 Logo 18
9. Angular Elements 18
10. Ivy Renderer 19
11. Component Dev Kit 19
12. Service Worker 20
13. Home Page 21
14. Edit Car Page 21
15. Add Car Page 22
16. H2 Database Overview 22
17. Filtering Feature 23
18. Sorting Feature 23
19. Pagination Feature 23

ABSTRACT-

7
 The main aim of this project is to use the features of the newly released

Angular 6 and of Springboot 2.0 to develop an Application. Angular 6 is used

for front-end development and Springboot for the back-end part of the

application. Angular 6 CLI(Command Line Interface) with any software such as

Eclipse or Visual Studio could be used to develop the application. For the back

end part of the application, either Spring Tool Suite(STS) could be used or else

Eclipse could be used along with the customized API file downloaded from the

Spring Initializr website.

Spring Boot is a brand new framework from the team at Pivotal, designed

to simplify the bootstrapping and development of a new Spring application. The

framework takes an opinionated approach to configuration, freeing developers

from the need to define boilerplate configuration. Angular is a JavaScript

framework that helps developers build applications. The library provides a

number of features that make it trivial to implement the complex requirements

of modern applications, such as data binding, routing, and animations.

The application built is for a Car Showroom. It contains details about the

Cars which are available in the Showroom. The web page also has options to

edit, delete an existing Car or add a new Car to the collection. Additional

features such as filtering, sorting, pagination have also been added.

CHAPTER-1-INTRODUCTION
8
1.1 Problem Statement-
To create an Application for a Car Store by integrating Angular 6 with Springboot.

1.2. About the Project-

This project is an application built for a Car Store. The homepage displays the list of
the Cars which are present in the Store along with their various details such as Car Id,Car
Name,Date of Manufacture, Cost of the Car, Color of the Car and the Ratings for that
particular Car. Each of these Cars have an Edit button placed for the user to be able to edit
any of the details of that particular Car. In the edit page,option for deleting the Car from the
Car Store/Library is also made available. For adding a new Car to the collection, An Add
Button is present in the Homepage.

1.3. Motivation-
Earlier, HTML was the perfect template language to develop static web pages.
However, web applications have taken over now, and they are way more interactive &
dynamic. Angular is a structural framework that can be of help in using Single Page HTML
for declaring dynamic views in web-apps. Put differently, this is a framework that stretches
HTML’s syntax in order to let your app’s components be expressed clearly and precisely.

There are a range of benefits of this structural framework that make it the tool of
choice for modern-day web applications. It is designed by Google, and that happens to be one
of its prime advantages. There’s a large community to help new as well as honed developers
in getting over challenging obstacles in their projects. This also means that clients get exactly
what they are looking for. Developers also love its dependency injection as well as data
binding, as this ensures that a large part of the code that a programmer will write is now
eliminated / automated. For the clients, this can translate into valuable time saving. The
higher level of abstraction it offers to programmers also goes a long way in simplifying app
development, and reducing development time.

1.4. About the Company-

9
 L&T Technology Services is a wholly owned subsidiary of Larsen & Toubro with
focus in the engineering services space, partnering with many of the Fortune 500 companies
globally. It offers design and development solutions throughout the entire product
development chain across various industries such as Industrial Products, Medical Devices,
Transportation, Telecom and Hi-tech and Process Industry. The company also offers
solutions in the areas of Mechanical engineering Services, Embedded Systems Services,
Product Lifecycle Management (PLM), Engineering Analytics and Power Electronics and
M2M and the Internet of Things (IoT) With a multi-disciplinary and multi-domain presence,
we challenge ourselves every day to help clients achieve a sustainable competitive advantage
through value-creating products, processes and services. Headquartered in India, with close to
9500 highly skilled staff, 6 delivery centres and operations in more than 30 locations around
the world, we constantly find flexible ways of working tailored to our assignments and
customer needs.

L&T Technology Services, a wholly-owned subsidiary of Larsen & Toubro Limited

(L&T), has purchased 74% of the equity capital of Thales Software India Pvt. Ltd., the Indian
subsidiary of Thales, the global technology leader in aerospace, transportation and defence
and security markets. With this transaction, L&T Technology Services will now manage and
oversee the management control, operations and delivery of services of the new joint venture.
The joint venture brings together the strategic strengths of both the groups. By retaining 26%
equity stake, Thales will help the company develop the latest trends in the avionics industry,
one of its core businesses. This collaboration adds to L&T Technology Services’ growing
competencies by enhancing its expertise in high-end avionic software.

The joint venture capitalises on the existing strong relationship between the two
groups, L&T and Thales, and ensures a long term partnership in the engineering services
domain. Furthermore, the transaction should enable Thales to select this new group as its
Indian Offset Partner, resulting in inflow of Offset related revenues in the joint venture.

1.5. Post/Related Work-

10
 Most of the current web applications run either on Angular JS(Angular 1.x) or React
JS. A few of them have upgraded to Angular(Angular 2.0 and above). But most of the
applications seem to be using older versions of Angular. Angular 6 is one of the newest
technologies and offers many additional features apart from the ones already available in
older Angular versions, such as Angular4 and below. The older versions are missing out on
these new features which are very useful.

1.6. Challenges-
→ Proper linking of Angular 6 and Springboot.
→ Fetching data from the localhost to display on the Web Application.
→ Knowing the exact packages and dependencies to be installed for certain features of
Angular 6.
→ Making the application visually attractive and user-friendly.
→ Displaying data on localhost from the Springboot application.

1.7. Basic Homepage-

Figure 1- Basic Homepage

CHAPTER-2-DESIGN AND IMPLEMENTATION

11
2.1. DESIGN/MODULES-

The various modules/components involved in this web application are-

→ Homepage-
The homepage titled ‘Cars’ displays all of the details of the Cars which are
available in the Library. The various details displayed for each Car are Car Id, Car
Name, Date of Publishing, Cost of the Car, Cost Price of the Car and it’s Rating.
Along with these details, for each Car, an Edit Car button has been added which
redirects it to the Edit Car page. In the bottom left corner of the web page, an Add Car
button is present which redirects it to the Add Car page. Additional features which
have been added are Filtering, Sorting of data and Pagination.

→ Edit Page-
This module is invoked when the Edit button of any of the Cars is clicked. It
displays the details of the Car selected for editing. The user can modify the existing
details of that particular Car. The Car Id is a fixed auto-generated value, so it can’t be
modified. The Car Name, Cost of the Car are available as text fields. Date of
Manufacture is of the date format, so a Calendar opens up for the user to be able to
select a date from the Calendar. The Car color attribute is of drop down list format
and it allows the user to select the color for the given Car. Ratings for the Car is taken
as an input through Radio Buttons, which range from 1-5, with 1 being the lowest
rating and 5 being the highest rating. Once the user has modified the necessary details,
There are 3 options available- Save, Delete and Cancel. Save option updates the Car
details and redirects to the Homepage. Delete option removes that particular Car from
the list of Cars. Cancel option reverts back to the Homepage without making any
changes.

12
 → Add Car Page-

This module is invoked when the Add Car Button present in the homepage is
clicked. This page is similar to that of the Edit Car Page, with the difference being
that the Edit Car Page displays the details of the Car which has to be edited whereas
the Add Car Page will have all of its fields as empty and they need to be filled by the
user based on the Car which is to be added. Once the user has entered the details for
the new car, There are 2 options available- Save and Cancel. Save option saves all the
details entered and creates a new record. Cancel option reverts back to the Homepage
without making any changes.

→ H2 Database-

It’s a Java SQL database where the Car records can be viewed and modified
using standard SQL Queries. This database is one of the dependencies added using
Spring Initializr. The main features of H2 are:

 Very fast, open source, JDBC API

 Embedded and server modes; in-memory databases
 Browser based Console application
 Small footprint: around 1.5 MB jar file size

13
2.2. ARCHITECTURE-

Figure 2- Angular 6 Architecture

Angular is a platform and framework for building client applications in HTML

and TypeScript. Angular is written in TypeScript. It implements core and optional
functionality as a set of TypeScript libraries that you import into your apps.

The basic building blocks of an Angular application are NgModules, which provide a

compilation context for components. NgModules collect related code into functional
sets; an Angular app is defined by a set of NgModules. An app always has at least a root
module that enables bootstrapping, and typically has many more feature modules.

 Components define views, which are sets of screen elements that Angular can
choose among and modify according to your program logic and data.
 Components use services, which provide specific functionality not directly related
to views. Service providers can be injected into components as dependencies,
making your code modular, reusable, and efficient.

Both components and services are simply classes, with decorators that mark their type
and provide metadata that tells Angular how to use them.

 The metadata for a component class associates it with a template that defines a

view. A template combines ordinary HTML with Angular directives and binding
markup that allow Angular to modify the HTML before rendering it for display.
 The metadata for a service class provides the information Angular needs to make
it available to components through dependency injection (DI).

An app's components typically define many views, arranged hierarchically. Angular

provides the Router service to help you define navigation paths among views. The router
provides sophisticated in-browser navigational capabilities.

14
 Figure 3- Advantages of Angular 6

Figure 4- Flowchart for General Car Sales Procedure

15
2.3. IMPLEMENTATION-

The three main tools used for implementing the project are Angular CLI, any Code
Editor such as Visual Studio or Notepad++ or Eclipse and Spring Initializr or Spring Tool
Suite(STS). Angular CLI(Command Line Interface) is used to execute various installation
and run-time commands for Angular 6. Code Editor is used to edit and add code to various
components of the Project. Spring Initializr/Spring Tool Suite helps in creating the basic
Springboot API on which changes can be made based on the user requirements.

2.3.a. Spring Boot-

Figure 5- Spring Logo

Spring is a very popular Java-based framework for building web and enterprise
applications. Unlike many other frameworks, which focus on only one area, Spring
framework provides a wide verity of features addressing the modern business needs via its
portfolio projects. Spring framework provides flexibility to configure beans in multiple ways
such as XML, Annotations, and JavaConfig. With the number of features increased the
complexity also gets increased and configuring Spring applications becomes tedious and
error-prone. The Spring team created SpringBoot to address the complexity of configuration.

Spring is very popular because of several reasons:

 Spring’s dependency injection approach encourages writing testable code

 Easy to use but powerful database transaction management capabilities
 Spring simplifies integration with other Java frameworks like JPA/Hibernate ORM,
Struts/JSF/etc. web frameworks
 State of the art Web MVC framework for building web applications

In this project, both Annotations based and JavaConfig based configurations are used-

16
 Figure 6- Annotation Based Configuration

Figure 7- Application Based Configuration

Spring provides many approaches for doing the same thing, and we can even mix the
approaches and use both JavaConfig and Annotation based configuration styles in the same
application. That is a lot of flexibility and it is one way good and one way bad. People
new to Spring framework may gets confused about which approach to follow. As of now the
Spring team is suggesting to follow JavaConfig based approach as it gives more flexibility.
But there is no one-size fits all kind of solution. One has to choose the approach based on
their own application needs.

17
2.3.b. Angular 6-

Figure 8- Angular Logo

Angular is a platform that makes it easy to build applications with the web. Angular
combines declarative templates, dependency injection, end to end tooling, and integrated best
practices to solve development challenges. Angular empowers developers to build
applications that live on the web, mobile, or the desktop.

→New features of Angular 6-

i. Angular Elements-

Figure 9- Angular Elements

Angular is a perfect choice for developing Single-Page Applications, creating a widget that
can be added to any existing web page was not a simple task. The Angular Elements package
will allow you to create an Angular component and publish it as a Web Component, which
can be used in any HTML page.
18
ii. Ivy Renderer-

Figure 10- Ivy Renderer

Ivy is a new backward-compatible Angular renderer focused on further speed improvements,
size
reduction, and increased flexibility by making the size of the app smaller and the compilation
faster.The Angular Team promises that switching to Ivy rendered will be smooth. This
important feature will reduce the code size by gzipped the code which will make compilation
faster.

iii. Component Dev Kit(CDK)-

The Figure 11- Component Dev Kit

Angular
Material library uses component dev kit, which provides more than 30+ UI components.
CDK allow us to build our own library of UI components using Angular Material. It also

19
supports Responsive Web Design layouts eliminating the need for using libraries like Flex
Layout or learning CSS Grid.

iv. ng add-

The Angular team has added ng-add command in Angular-CLI which let's user to
download and install new packages in your angular app.

----->ng add @angular/elements

v. ng update-

If the user wants to upgrade it's angular app from Angular 5 to Angular 6 so angular
team added support for ng-update to its Angular-CLI which let the user update and upgrade
packages.

----->ng update @angular/core

vi. Service Worker-

Figure 12- Flow Chart of Service Worker

20
 It is a script that runs in the web browser and manages to cache for an application.
Service worker is included in angular 5. In angular 6 service worker comes with bug fixes
and additional feature.

2.4 SCREENSHOTS-

Figure 13- Home Page

21
Figure 14- Edit Car Page

Figure 15- Add Car Page

22
Figure 16- H2 Database

Figure 17- Add Filter

23
 Figure 18- Sorting Feature

Figure 19- Pagination Feature

CHAPTER-3-RESULTS AND CONCLUSION

This project has combined the useful features from both Angular 6 and Springboot in
creating an Application for maintaining Car Records for a Car Store/Car Showroom. The
project works fine and also with good speed. It is quite responsive and doesn't take much time
in switching between pages. It has a user friendly interface and the user can add/edit/delete
Car records easily. This can be done in the website or using H2 database or in the code itself
for the default list of cars. This implementation using Angular 6 is much more effective as
compared to older Angular versions.

24
 This Project can be improved by linking it to a proper Database such as MongoDB,etc.
Also various other features such as User/Admin login, Graphics, Renting out of Cars
functionality, etc could be added.

CHAPTER-4-REFERENCES

https://reactdom.com/blog/spring-books
https://blog.angular-university.io/angular-material-data-table/
https://shekhargulati.com/2017/11/08/a-minimalist-guide-to-building-
spring-boot-angular-5-applications/
https://github.com/shekhargulati/spring-boot-maven-angular-starter
https://www.codementor.io/hantsy/build-a-reactive-application-with-
angular-5-and-spring-boot-2-0-fv8uif7wg
https://vitalflux.com/spring-boot-angular-5-pwa-dev-environment-setup/
https://www.djamware.com/post/5a792ecb80aca7059c142978/spring-boot-
mongodb-and-angular-5-crud-java-web-application

25
https://www.evoketechnologies.com/blog/integrate-angular-spring-boot-
restful-api/
https://blog.marcnuri.com/angular-spring-boot-integration-gradle/
https://codecraft.tv/blog/2017/09/07/angularjs-to-angular-using-iframes/
https://codecraft.tv/courses/angular/
https://stackblitz.com/edit/angular-uxfuql
https://coursetro.com/courses/19/Learn-Angular-5-from-Scratch---Angular-5-
Tutorial/lessons/2#
https://sibeeshpassion.com/what-is-new-and-how-to-set-up-our-first-
angular-5-application/
https://dzone.com/articles/real-world-angular-series-part-1a-mean-setup-
and-a
https://dzone.com/articles/real-world-angular-series-part-1b-mean-setup-
and-a
https://dzone.com/articles/creating-a-front-end-for-your-user-profile-
store-w?fromrel=true
https://github.com/Ismaestro/angular6-example-app
http://www.jcombat.com/angular-5/deploying-spring-and-angular-application-
on-the-same-server
http://www.jcombat.com/angular-5/spring-based-restful-web-service-angular5
https://www.concretepage.com/angular-2/angular-2-select-option-multiple-
select-option-validation-example-using-template-driven-form
https://www.concretepage.com/angular-2/angular-2-radio-button-and-
checkbox-example

26