Professional Documents
Culture Documents
Angular 6 With Springboot Application: Natesh Balaji
Angular 6 With Springboot Application: Natesh Balaji
submitted by
NATESH BALAJI
15BCE1049
BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE AND ENGINEERING
AUGUST,2018
1
School of Computing Sciences and Engineering
Date:
2
School of Computing Sciences and Engineering
BONAFIDE CERTIFICATE
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 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
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
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
for front-end development and Springboot for the back-end part of the
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 Boot is a brand new framework from the team at Pivotal, designed
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
CHAPTER-1-INTRODUCTION
8
1.1 Problem Statement-
To create an Application for a Car Store by integrating Angular 6 with Springboot.
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.
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.
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.
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.
11
2.1. DESIGN/MODULES-
→ 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:
13
2.2. ARCHITECTURE-
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.
14
Figure 3- Advantages of Angular 6
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.
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.
In this project, both Annotations based and JavaConfig based configurations are used-
16
Figure 6- Annotation 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-
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.
i. 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-
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.
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.
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-
21
Figure 14- Edit Car Page
22
Figure 16- H2 Database
23
Figure 18- Sorting Feature
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