//Angular 2 and Spring REST Simple CRUD Application

Angular 2 and Spring REST Simple CRUD Application

Angular 2 is one of the Most Popular Front End Web Framework on the internet, Spring MVC is also one of the Most Popular Application Framework on the internet, So today in this article, let’s combine/integrate these two frameworks and build a simple CRUD application.
The goal of the application is to display the list of books, adding a new book, updating the existing book and deleting a book.
We will use Angular 2 in the front end for building forms, displaying the records and making an HTTP calls.
In the backend, using Spring REST we will perform the CRUD operations.


Tools and Technologies Used
  • Spring 4
  • Hibernate 5
  • Angular 2
  • Bootstrap 3
  • MySQL
  • Jackson API 2.8.7
  • Maven 3.3.9
  • Eclipse Oxygen
  • Apache Tomcat 8
  • Visual Studio Code

First let’s create a DB for our application, open your MySQL and add execute the following command,

Let’s start with the backend, Here is the project structure of Spring REST application





I don’t go over in detail about the REST API’s, I believe you all know that the concept of API. Long story short, API’s are nothing but URL’s when we hit those URL’s/Consume those URL’s we will get JSON data that’s it.
So let’s look at how to build such API’s using Spring REST

Since we are using a maven, first let’s add all the dependencies that are required for our application

pom.xml

Next step is to create a Property file inside the resources folder and specify the database properties



db.properties

Once it’s done, let’s configure the spring and hibernate. Inside the config, package create a class called AppConfig and write the following code.

We will annotate this class with @Configuration, @PropertySource, @EnableTransactionManagement and @ComponentScan

@Configuration: It is a replacement to the XML based configuration for configuring spring beans. So instead of an XML file, we write a class and annotate that with @Configuration and define the beans in it using @Bean annotation on the methods.

@PropertySource: Specify the classpath of the property file. Reading values from a property file are far superior to hard coding them in our class files. If we hard code then we need to recompile if we want to change any of them.

@EnableTransactionManagement: It enables the transaction management. @ComponentScans: To scan the multiple packages.

AppConfig.java

Next step is to create MyWebAppInitializer class to initialize the servlet container, instead of using traditional web.xml, we will use java class that will extends AbstractAnnotationConfigDispatcherServletInitializer.



MyWebAppInitializer.java

Next step is to create WebConfig class inside the config package, we will annotate this class with @Configuration, @EnableWebMvc, and @ComponentScan

@EnableWebMvc: @EnableWebMvc is used to enable Spring MVC. @EnableWebMvc is equivalent to <mvc:annotation-driven /> in XML.

WebConfig.java

Above three files are required for the spring and hibernate configuration.

Now, let’s write the model class, create a Book class inside the model package.




Book.java

Now, let’s create an Interface for DAO, we will create BookDAO interface inside the dao package

BookDao.java

Now, let’s implement those methods in the BookDaoImp class and annotate this class with @Repository

@Repository: It is an annotation that marks the specific class as a Data Access Object, thus clarifying its role.

BookDaoImp.java

Now, let’s create another Interface for service, we will be creating this service inside the service package



BookService.java

Now, let’s implement those methods in the BookServiceImp class and annotate this with @Service

@Service: This tells hibernate it is a Service class where you will have @Transactional etc Service layer related annotations so hibernate treats it as a Service component.

BookServiceImp.java

Finally, we will create a controller BookController inside the controller package and annotate with @RestController, which specifies that this is a REST controller



BookController.java

That’s it for the backend, now we have 5 REST API’s

HTTP Method CRUD Operation Description
POST Create Create a new resource ( equivalent to SQL INSERT statement)
http://localhost:8037/spring-mvc-restfull-crud-example/book
GET Read Retrieve a resource ( equivalent to SQL SELECT statement)
http://localhost:8037/spring-mvc-restfull-crud-example/book
http://localhost:8037/spring-mvc-restfull-crud-example/book/{ID}
PUT Update Update or modify a resource ( equivalent to SQL UPDATE statement)
http://localhost:8037/spring-mvc-restfull-crud-example/book/{ID}
DELETE Delete Delete a resource ( equivalent to SQL DELETE statement)
http://localhost:8037/spring-mvc-restfull-crud-example/book/{ID}

We will consume these API’s in front end using Angular 2.



Let’s look at the front end application,
Before creating an Angular application make sure to install Node.js and npm on your machine,

First, let’s install angular CLI globally on our machine,

Create a new project,

What is the purpose of the app.module.ts?
Is it to start up your application, and set the links to your other modules.
1 – Modules are the logic layers of your application. Each module is there to package things logically so that it’s easier for people to understand and maintain your application, made of several modules. For example, if you are doing a rich application, you should have a LoginModule, an AuthenticationModule, etc…
2 – You need to import things in your module so that Angular knows what it is going to use. Basically, your LoginModule will need the Angular FormModule, which might not be needed for the AuthenticationModule
3 – This leads us here: The AppModule, therefore, should only import the others modules it is linked to, and provide the services that will be needed globally. Your future LoginModule won’t need a service to be provided, but the AuthenticationModule, which will have an AuthenticationServicewill most probably do.

What is Angular Router?



Angular Router is an official Angular routing library, written and maintained by the Angular Core Team.
It’s a JavaScript router implementation that’s designed to work with Angular and is packaged as. @angular/router
First of all, Angular Router takes care of the duties of a JavaScript router:

  • it activates all required Angular components to compose a page when a user navigates to a certain URL
  • it lets users navigate from one page to another without page reload
  • it updates the browser’s history so the user can use the back and forward buttons when navigating back and forth between pages.

In addition, Angular Router allows us to:

  • redirect a URL to another URL
  • resolve data before a page is displayed
  • run scripts when a page is activated or deactivated
  • lazy load parts of our application.

Let’s start with,

app.module.ts

Keep in mind: At least one module and component are required to initiate Angular2 App.





Do I need app.component.ts?
Not necessary
. That is just a name of .ts file. It can be any other component. But as said at least one module and component are required to initiate Angular2 App.

app.component.ts

app.component.html

Now, create two folders inside the app folder, book and others

Inside the book folder, created these files,

Inside the others folder, create these files,



pageNotFound.component.ts

Basically, there are three types of directives in angular2 according to documentation.

  • Component
  • Structural directives
  • Attribute directives

Component

is also a type of directive with template, styles and logic part which is the most famous type of directive among all in angular2.

  1. To register a component we use @Component meta-data annotation.
  2. A component is a directive which uses shadow DOM to create encapsulated visual behavior called components. Components are typically used to create UI widgets.
  3. A component is used to break up the application into smaller components.
  4. Only one component can be present per DOM element.
  5. @View decorator or templateurl template is mandatory in the component.



home.component.ts

bookList.component.ts

bookList.component.html

bookList.component.css

book.ts

book.service.ts



book.component.ts

book.component.html



book.component.css

So now first let’s run the Spring REST application, and then run the Angular application. To run the angular application, navigate to the project directory, and execute the following command,

At this point, if you navigate to http://localhost:4200 (default URL), you will see this web page. If you see this webpage then congratulations you made it, if not then double check the code.







That’s it for this article, I hope this article helped you in one or the other way, do let me know how this article helped you, I will see you in the next article.

Download the Front-end partDownload

Download the Backend partDownload

Download the Complete projectDownload

Well, I am Bushan Sirgur from Banglore, India. Currently, I am working as a Software Developer in a Service Base Company. I am interested in JAVA/J2EE, Angular 2, JavaScript, jQuery, MongoDB.