This tutorial provides a complete implementation of Spring Boot, Angular 5 and spring data to build an end to end single page java web application with example.We will be using spring boot 1.5 to expose REST APIs and angular5 with routing to build our client that will be consuming the APIs exposed by the server.Also, we will be integrating MySql database with the backend code for CRUD operation.We will be using angular CLI to generate angular project and spring boot initializers to generate spring boot project.At the end of this article, you will be able to build a user management application with CRUD operation that can either be deployed to a standalone tomcat or deploy client and server to different servers with cross origin requests. In the next article, we will look into different ways to package spring boot and angular 5 application together in a single war file with maven and deploy to standalone tomcat. Also you might be interested in integrating this application with Angular5 JWT Authentication with Spring Boot Security
1. Angular 5 is more faster, lighter and easy to use.
2. Material design capabilities and improved compiler with build optimizer
3. New HttpClientModule is introduced which is a complete rewrite of the existing HttpModule.
4. TypeScript 2.4 support.
5. Reactive Forms Support
We have two different part, client and server, of the application that we are going to build and hence, the environment set up is also specific to each part.
Angular 5 provides a beautiful tool - Angular CLI to get started with Angular. Here, we will be using the same tool to generate a sample angular app and then modify it to match our requirement.To get started with Angular CLI, it is required to have node installed so that we can use the NPM tool. You can check if node is installed or not on your machine by hitting node -v. On my machine I get following result.
If not installed visit NodeJs official website to install it first.Now, once it is done, traverse to your workspace location and execute following commands to install angular cli and generate a sample angular project.
Once this is done, you can traverse to the location and see a folder portal-app is created that contains all the files and folders generated by angular cli command to get started with angular 5.Now you can open your favourite editor to import the project.I imported this project in IntellijIdea and got the structure as below:
One thing to check here is that if you have installed your NodeJs with sudo command, then you might get some permission issue as below while installing angular cli.To avoid these kind of situation, it is always recommended to use brew command while installing any new software.
If you face this issue then provide read/write access to the folder - /usr/local/lib/node_modules or follow the instruction here - Mac Support
For windows user, you can use git command line or cygwin for the installation.
Spring boot team has really made spring boot environment setup easy by providing default initializers.Open the url https://start.spring.io/ and generate the project as follow.
Now unzip user-portal.zip and import into java IDE. Following will be the final structure.
Now let us try to understand the different files generated.
Modules - Modules break up the application into logical pieces of code. Each piece of code or module is designed to perform a single task.All the modules are loaded by main.ts.
Component - Component is used to bring the modules together.
tsconfig.json - The presence of tsconfig.json file in a directory indicates that the directory is the root of a typescript project.This file specifies the root files and typescript compiler motions required to compile typescript.
package.json - It contains all the dependencies defined for the angular project.Once, we do nom install, these dependencies are automatically downloaded.
karma.conf.json - Config file for karma unit tests.
The file .angular-cli.json will have all the application configurations such as info about the root and out directory.The welcome or main html file along with the main ts file. All the other environment related information will be present here.
Now it's time to run the dfault generated application and see it in the browser. If you are using IntellijIdea then you can run ng serve command from Terminal inside it and if not hit following command in the terminal.
After this open your browser and hit the url - http://localhost:4200/ and the angular app is up. Now we can start modifying the app to create a user management portal.
Now, let's start by creating our APIs first.We have UerController where all the APIs for CRUD operation is exposed.The @CrossOrigin is used to allow Cross-Origin Resource Sharing (CORS) so that our angular application running on different server can consume these APIs from a browser.We can also configure the proxy in angular side using proxy.config.json which has been discussed in the subsequent topic.UserController.java
The service class has no extra logic here and it's a very a simple implementation.UserServiceImpl.java
We will be using Spring data JPA implementation for ORM related solution.To know inside implementation of Spring data you can visit my other post - Spring Boot JPA and Spring Boot Hibernate implementation.UserRepository.java
Angular CLI has generate command to create component.Hit the command ng generate component user and it will create a user folder inside app folder.This user folder will have all the required files for user module.
At first we will modify app.component.html to include 2 links for list users and add users.All our views willl be loaded inside router-outlet.app.component.html
Since, we have two routes defined above, we require two different views(user.component.html, add-user.component.html) and components(user.component.ts, add-user.component.ts) to render on each click.Now let us implement the code for user.component.ts.Here, the method ngOnInit() will be invoked when this component is loaded and it will fetch all the user records and the html page will be populated.user.compnent.ts
As discussed we have two views - user.component.html and add-user.component.htmluser.component.html
Now it's time to configure routing in angular.In this configuration, we will configure the path and corresponding component to load which will in turn load the respective view.Following is our routing configuration.
Now we are almost done with our application.We only need to include all the above implementation in our main module.app.module.ts
To configure proxy in angular CLI, we need to create proxy.config.json file in the root of the angular project and edit the start script in package.json.proxy.config.json
The value of target here is the context root of the application and api is the endpoint for user API.package.json
Now make sure to change the userUrl value to '/api' in user.service.ts file and comment @CrossOrigin in UserController.java.Once this done use ng serve --proxy-config proxy.config.json or npm start to start the angular app.
We will be using spring boot embedded tomcat feature to deploy application.For more on this feature check this.UserPortalApplication.java
Now the server is up.Hit ng serve to deploy angular application and let's test the application.
Hit the url - http://localhost:4200/ and you can see following result.
Now, click on the Add User link and following form will appear to add user.
Now, click on the list user after adding multiple users.
This is pretty much about spring boot and angular 5 integration tutorial.In the next article, we will look into deploying this application in a single war file with maven and tomcat. You can download the source from here.If time permits, we will try to integrate spring security with it.Please let me know your comments below.
1. Angular Jwt Authentication
2. Angular Material Dialog
3. Angular Material App
10. Spring Boot Jwt Auth
Contact us: email@example.com