Integrate Angular 10 and SpringBoot RestAPIs Example
angular 10
1
springboot
135
restapi
46
Male avatar

loveprogramming viết ngày 05/03/2021

https://grokonez.com/integrate-angular-10-and-springboot-restapis-example

[no_toc]In the tutorial, we show you how to integrate Angular 10 with SpringBoot RestAPI for development using SpringToolSuite IDE.

  • Setup Nodejs and Angular CLI
  • Create simple Springboot RestAPIs
  • Setup Angular 10 project
  • Import Angular 10 to SpringToolSuite
  • Integrate SpringBoot RestAPI with Angular 10

Related posts:

Technologies

  • Node.js
  • Angular 10
  • SpringBoot 2.x
  • SpringToolSuite

    Goal - Integrate Angular 10 with SpringBoot RestAPI

  • We create an Angular 10 client & SpringBoot RestAPI as below structure:

Angular 10:

angular-8-integrate-with-springboot-tutorial---angular-8-project-structure-1

SpringBoot project:

angular-8-integrate-with-springboot-tutorial---springboot-project

Use Angular 10 client to call Spring RestAPI, we get:

angular-8-integrate-with-springboot-tutorial---request-through-proxy

Deploy Angular 10 production-build with Spring-Boot project, We get:

angular-8-integrate-with-springboot-tutorial---angular-8-integrate-with-spring-boot

Setup Node.js

Firstly, checking whether or not you have ‘Node.js‘ installed, by command: node -v & npm -v.
If the command goes unrecognized, we must install 'NodeJS'.

-> Go to: nodejs.org. Download Node.js installer, the tutorial uses version: 10.4.0 Current. We got a ‘node-v10.15.3-x64.msi‘ file, double click on it and follow the guides to setup Node.js, successfully result:

angular-8-integrate-with-springboot-tutorial-nodejs-download

angular-8-integrate-with-springboot-tutorial-nodejs-installing

– Open cmd, checking Node.js by commandline: node -v & npm -v:

C:\Users\Administrator>node -v & npm -v
v10.15.3
6.4.1

Setup Angular 10 CLI - Integrate Angular 10 with SpringBoot RestAPI

  • Using commandline npm install -g @angular/cli@v8.0.0-rc.4, then checking Angular-CLI after setup by commandline ng -v:

angular-8-integrate-with-springboot-tutorial-nodejs-check-the-installation-successfully

Implement SpringBoot RestAPI project

– Using SpringToolSuite, create a simple SpringBoot 2.0 web-application, dependencies:

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>
  • Implement a RestAPI controller:

package com.grokonez.restapis.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class RestApiController {

    @RequestMapping("/api/hi")
    public String hi() {
        return "Hello world! >>> Message from grokonez.com";
    }
}

Setup Angular 10 Project

  • Location of the SpringBoot project at: "C:\Users\Administrator\Documents\workspace-spring-tool-suite-4-4.1.2.RELEASE\SpringBootRestAPIs"

-> Now, open cmd, cd to workspace: "C:\Users\Administrator\Documents\workspace-spring-tool-suite-4-4.1.2.RELEASE".

– Create a new Angular 10 project by commandline: ng new angular8-client.

angular-8-integrate-with-springboot-tutorial---create-angular-project

  • Run angular8-client project by cmd npm start, results:

angular-8-integrate-with-springboot-tutorial---start-angular-project

angular-8-integrate-with-springboot-tutorial---start-angular-project-result-on-web

Import Angular 10 to SpringBoot project

  • Open SpringToolSuite, go to ‘Import -> General -> Projects’ from ‘Folder or Archieve’, press ‘Next’: Press ‘Finish’, angular8-client is imported:

angular-8-integrate-with-springboot-tutorial---angular-8-project-structure

To clean the sourcecode in STS, we need to remove node_modules by following the steps:
– Right click on ‘angular8-client’ project, choose Properties, then choose: ‘Resource -> Resource Filter’.
– Press ‘Add Filter…’, choose ‘Filter Type: Exclude all’, Applies to: ‘Files and folders’, and check ‘All children (recursive)’, with ‘File and Folder Atributes’, we specify ‘node_modules’:

angular-8-integrate-with-springboot-tutorial---all-resource-filter-excludes

Press ‘OK’. Then press ‘Apply’, result:

angular-8-integrate-with-springboot-tutorial---angular-8-project-structure-after-filter

-> Now ‘node_modules’ is already removed from the SpringToolSuite.

Modify Angular 10 project

  • Open ‘/angular8-client/src/app/app.component.css’, edit as below:
h1 {
  color: blue;
  font-size: 150%;
}
  • Open ‘/angular8-client/src/app/app.component.html’, edit:
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
  • Open ‘/angular8-client/src/app/app.component.ts’, edit:
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular8-client with grokonez.com';
}

Right click on ‘angular8-client’ project, choose ‘Show in Local Terminal -> Terminal’. Launch ‘angular8-client’ project as cmd: npm start.

angular-8-integrate-with-springboot-tutorial---angular-8-client-after-change-css-and-html

Integrate SpringBoot RestAPI with Angular 10

Angular8-Client and SpringBoot server work independently on ports 4200 and 8080. Goal of below integration: the client at 4200 will proxy any /api requests to the SpringBoot server at port 8080.

Step to do:
– Create a file proxy.conf.json under project angular8-client folder with content:

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

– Edit package.json file for start script:

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
},
 ...

– Build and run the SpringBoot project at port 8080. And restart angular8-client at port 4200.

Make a request http://localhost:4200/api/hi -> result:

angular-8-integrate-with-springboot-tutorial---request-through-proxy

Now deploy Angular 10 with Spring Boot,

Steps ->

  • Build ‘angular8-client’ with command ng build --prod:

angular-8-integrate-with-springboot-tutorial---build-angular-8-in-production-mode

Result is a ‘dist’ folder:

angular-8-integrate-with-springboot-tutorial---angular-8-dist-result-folder

We have 2 approaches to deployment Spring Boot RestAPIs with angular8-client:
– Manually copy all files from ‘dist’ folder to ‘/src/main/resources/static’ folder of SpringBoot server project.
– Using Maven plugin to copy all files from ‘dist’ folder to ‘/src/main/resources/static’ folder of SpringBoot server project.


<plugin>
  <artifactId>maven-resources-plugin</artifactId>
  <executions>
        <execution>
            <id>copy-resources</id>
            <phase>validate</phase>
            <goals><goal>copy-resources</goal></goals>
            <configuration>
                <outputDirectory>${basedir}/target/classes/static/</outputDirectory >
                <resources>
                    <resource>
                        <directory>${basedir}/../angular8-client/dist/angular6-client</directory >
                    </resource>
                </resources>
            </configuration>
        </execution>
  </executions>
</plugin>

Now build and run the SpringBoot server again with commands:
– Build: mvn clean install
– Run: mvn spring-boot:run

Then make some requests:
http://localhost:8080, result:

angular-8-integrate-with-springboot-tutorial---angular-8-integrate-with-spring-boot

– Make request: http://localhost:8080/api/hi, result:

angular-8-integrate-with-springboot-tutorial---spring-boot-integrate-angular-8-restapi-successfully

Done! Now you can start to develop Angular 10 with SpringBoot & SpringToolSuite!

Sourcecode

  • angular8-client
  • SpringBootRestAPIs

    Conclusion - Angular 10 SpringBoot Integration

  • You had learned how to integrate Angular 10 with SpringBoot project:
    • Create an Angular 10 project
    • Edit Css, HTML of Angular 10
    • Integrate SpringBoot with Angular 10 production build and using proxy file

Happy Learning! Thank you very much!

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

444 bài viết.
77 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 6 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 5 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 5 tháng trước
1 0
Bài viết liên quan
Male avatar
0 0
https://grokonez.com/frontend/angular/angular6/kotlinspringbootangular6crudhttpclientmysqlexamplespringdatajparestapisexample Kotlin Spring Boot +...
loveprogramming viết 1 tháng trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
444 bài viết.
77 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!