Skip to main content

Angular 4 CRUD application with Spring Boot REST service – Part 1

Angular 4

In this post, we are going to build a CRUD Angular 4 web application that supports to the REST service. We will be using the Spring Boot for creating REST services and Angular CLI use for generating the web application.

1) Introduction

In this tutorial, we are going to build simple user management system including add, edit and delete a user. For generating Angular 4 components, we are using Angular CLI. It’s simple code generation tool that includes a server. The user management system calls the REST service to get the data.

2) REST Service

Firstly, we are going to build the REST service. It’s a simple service. And use a Java List to store user’s details. If you want to look at how to integrate with the database follow this tutorial series.

REST Service with Spring Data and MySQL

CRUD operations

Validation

To creating a Spring Boot application, go the Spring Initializer. Then generate the project with following settings.

Spring Boot Initializer

It must be added the Spring Boot Web dependency the generate the project. Now downloaded zip file open by Intellij (File -> New -> Project from Existing Sources) and select the build.gradle file.

Note: – You can use whatever IDE as your preference.

Next step is, create a user domain model. User.java

Next task is, create a REST service. In this case, include all things in the same class and use the ArrayList to store user’s details.

UserController.java – this a simple REST service that provides get all users, add new user, edit user and delete user.

 

Project structure

Now project structure like above picture. The Application class use for run Spring Boot application. If you want to test the REST service run the Application.java.

Use this API url to get all users. http://localhost:8080/users

3) Setup Angular 4 CLI and generate the application

First of all, we need to setup Angular CLI for code generating.

npm install -g @angular/cli

go to the project directory and using below command to generate the angular application.

ng new user-app --routing

then go the user-app directory and run the following command to test your app locally.

cd user-app

ng serve

finally, go to the http://localhost:4200/

4) Generating the Components

In this app, a major module is a user module. It will include user-list sub component and user-create sub component.

  • user-list sub component – use for list users.
  • user-create sub component – use for user creating and editing form.

Use this command to generate use the user module.

ng generate module user --routing

Then we need to a service to call the REST services. We called it a user service.

ng generate service user/user

Now we have to generate sub-components.

ng generate component /user/user-list

ng generate component /user/user-create

project structure

 

5) Routing

The Routing use for redirect to the related page base on the url. First of all, modified the user-routing.module.ts in the user module.

Then, add the UserModule into the app.module.ts.

Now, run locally use ng serve. You can click on the links it will be redirected the user-list and user-create component.

Angular app run in locally

Finally, this tutorial has 3 parts. Next tutorial will be showing user data, creating a user form, form validation and integration with the REST service.

You can download from the GitHub.

Next Part – Angular 4 CRUD application with spring-boot REST service part 2


Related Post

8723total visits,44visits today

  • Simon Gwerder

    Cool. Some improvements in the Java code would be:
    – Initialize “users” with an empty list and save the null-checks / possible NPE whenever you call users.stream(). Eventhough “buildUser” takes care of that. Better save than sorry.
    – There’s a list method “isEmpty()”, so “users.size() == 0” is not needed (check not needed anyway in case you initialize the list).
    – Streams over empty lists are fine, they will collect to empty list. So no check needed.
    – Do never use “get()” without checking for actual values being present in the Optional (e.g. “findFirst()” returns Optional). Better use “orElse(..)” and provide a default value. Otherwise it throws an exception.
    – There’s a lot dangerous going on, if you consider the async calls.

    • mydevgeek

      Thanks your comment. I did change the UserController based on your suggestion. Thanks again.

  • Artem Lisiikh

    Awesome tutorial, thank you!
    Can’t wait to see the next part =)

  • sdf sdf

    Note: you forgot to mention that you modified the app.component.html file… https://github.com/damithme/angular4-cli-spring-boot-example/blob/Part-1/user-app/src/app/app.component.html

    EDIT: Thanks for the tutorial tho

RSS
Follow by Email
Facebook
Facebook
Google+
http://mydevgeek.com/angular-4-crud-application-with-spring-boot-rest-service-part-1/
Twitter