📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.
▶️ Subscribe to My YouTube Channel (176K+ subscribers): Java Guides on YouTube
▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube
Check out a full-stack tutorial at Spring Boot + Angular 8 CRUD Example Tutorial
What we will build?
- springboot-helloworld-application: This project is used to develop simple RESTFul API using Spring Boot 2.
- angular8-helloworld-example-tutorial: This project is used to develop single page application using Angular 8 as front-end technology. This Angular 8 application consumes Restful API developed and exposed by a springboot-helloworld-application project.
REST API using Spring Boot
http://localhost:8080/hello-world/api/v1/greeting
{"id":11,"content":"Hello, World!"}
Now, we will create a step by step Angular 8 Application to consume this web service.
Angular 8 App Development
http://localhost:8080/hello-world/api/v1/greeting
C:\Angular>node -v
v10.15.3
C:\Angular>npm -v
6.9.0
Install the latest version of Angular CLI
npm install -g @angular/cli
C:\angular>ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 8.0.1
Node: 10.15.3
OS: win32 x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.800.1
@angular-devkit/core 8.0.1
@angular-devkit/schematics 8.0.1
@schematics/angular 8.0.1
@schematics/update 0.800.1
rxjs 6.4.0
Create Angular 8 Application using Angular CLI
ng new angular8-helloworld-example-tutorial
Create Angular Service & Components
- ng g s hello-world
– ng g c hello-world
– ng g c menu
– ng generate class Message
Angular Project Structure
Integrate Bootstrap with Angular
npm install bootstrap jquery --save
...
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...
/* You can add global styles to this file, and also import other style files */
@import url(https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css)
hello-world.service.ts -> HelloWorldService
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { MessageModel } from '../model/Message';
@Injectable({
providedIn: 'root'
})
export class HelloWorldService {
constructor(private http: HttpClient) {
}
executeHelloWorldService() {
return this.http.get<MessageModel>('http://localhost:8080/hello-world/api/v1/greeting');
}
}
Model -> Message.ts
export class MessageModel {
id: number;
content: string;
constructor(private _id: number, public message: string) {
this.id = _id;
this.content = message;
}
}
hello-world.component.ts -> HelloWorldComponent
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { HelloWorldService } from '../service/hello-world.service';
@Component({
selector: 'app-hello-world',
templateUrl: './hello-world.component.html',
styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {
welcomeMessage = '';
constructor(private route: ActivatedRoute,
private router: Router, private helloWorldService: HelloWorldService) { }
ngOnInit() {
this.helloWorldService.executeHelloWorldService().subscribe((res) => {
this.welcomeMessage = res.content;
});
}
}
hello-world.component.html -> HelloWorldComponent
<div class="container">
Message from server -> <h1>{{this.welcomeMessage}}</h1>
</div>
menu.component.ts -> MenuComponent
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
welcomeMessage = 'Test';
constructor() { }
ngOnInit() {
}
}
menu.component.html -> MenuComponent
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div><a href="https://www.javaguides.net" class="navbar-brand">JavaGuides</a></div>
<ul class="navbar-nav">
<li><a class="nav-link" href="/hello-world">Hello World Tab</a></li>
</ul>
</nav>
</header>
app.module.ts -> AppModule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HelloWorldService } from './service/hello-world.service';
import { MenuComponent } from './menu/menu.component';
import { HelloWorldComponent } from './hello-world/hello-world.component';
@NgModule({
declarations: [
AppComponent,
MenuComponent,
HelloWorldComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
],
providers: [
HelloWorldService,
],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts -> AppRoutingModule
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world.component';
const routes: Routes = [
{path: '', component: HelloWorldComponent},
{path: 'hello-world', component: HelloWorldComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.ts -> AppComponent
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'frontend-spring-boot-angular-hello-world-example';
}
app.component.html -> AppComponent
<app-menu></app-menu>
<router-outlet></router-outlet>
Running Angular 8 Application
ng serve
ng serve --port 4204
Check out a full-stack tutorial at Spring Boot + Angular 8 CRUD Example Tutorial
Comments
Post a Comment
Leave Comment