📘 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.
✅ Some premium posts are free to read — no account needed. Follow me on Medium to stay updated and support my writing.
🎓 Top 10 Udemy Courses (Huge Discount): Explore My Udemy Courses — Learn through real-time, project-based development.
▶️ Subscribe to My YouTube Channel (172K+ subscribers): Java Guides on YouTube
What we will build?
- springboot-helloworld-application: This project is used to develop simple RESTFul API using Spring Boot 2.
- angular10-helloworld-example-tutorial: This project is used to develop single page application using Angular 10 as front-end technology. This Angular 10 application consumes Restful API developed and exposed by a springboot-helloworld-application project.
1. Develop REST API using Spring Boot
http://localhost:8080/hello-world/api/v1/greeting
{"id":11,"content":"Hello, World!"}
You can refer this article at https://www.javaguides.net/2019/04/spring-boot-2-hello-world-example.html
Now, we will create a step by step Angular 10 Application to consume this web service.
2. Develop an Angular 10 App
http://localhost:8080/hello-world/api/v1/greeting
I assume that you have installed Node.js on your machine. C:\Angular>node -v
v10.15.3
C:\Angular>npm -v
6.9.0
Install the latest version of Angular CLI 10
To install or update Angular 10 CLI, type this command in the terminal:
npm install -g @angular/cli
npm install -g @angular/cli
Create an Angular 10 App using Angular CLI 10
The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications.
If you are new to Angular CLI then check out official documentation at https://cli.angular.io.
Let's use the below command to generate an Angular 10 Client application. We name this project as "angular10-helloworld-example-tutorial".
ng new angular10-helloworld-example-tutorial
ng new angular10-helloworld-example-tutorial
C:\Angular\Angular 10>ng new angular10-helloworld-example-tutorial
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE angular10-helloworld-example-tutorial/angular.json (3814 bytes)
CREATE angular10-helloworld-example-tutorial/package.json (1280 bytes)
CREATE angular10-helloworld-example-tutorial/README.md (1052 bytes)
CREATE angular10-helloworld-example-tutorial/tsconfig.base.json (458 bytes)
CREATE angular10-helloworld-example-tutorial/tsconfig.json (475 bytes)
CREATE angular10-helloworld-example-tutorial/tslint.json (3184 bytes)
CREATE angular10-helloworld-example-tutorial/.editorconfig (274 bytes)
CREATE angular10-helloworld-example-tutorial/.gitignore (631 bytes)
CREATE angular10-helloworld-example-tutorial/.browserslistrc (853 bytes)
CREATE angular10-helloworld-example-tutorial/karma.conf.js (1049 bytes)
CREATE angular10-helloworld-example-tutorial/tsconfig.app.json (292 bytes)
CREATE angular10-helloworld-example-tutorial/tsconfig.spec.json (338 bytes)
CREATE angular10-helloworld-example-tutorial/src/favicon.ico (948 bytes)
CREATE angular10-helloworld-example-tutorial/src/index.html (320 bytes)
CREATE angular10-helloworld-example-tutorial/src/main.ts (372 bytes)
CREATE angular10-helloworld-example-tutorial/src/polyfills.ts (2835 bytes)
CREATE angular10-helloworld-example-tutorial/src/styles.css (80 bytes)
CREATE angular10-helloworld-example-tutorial/src/test.ts (753 bytes)
CREATE angular10-helloworld-example-tutorial/src/assets/.gitkeep (0 bytes)
CREATE angular10-helloworld-example-tutorial/src/environments/environment.prod.ts (51 bytes)
CREATE angular10-helloworld-example-tutorial/src/environments/environment.ts (662 bytes)
CREATE angular10-helloworld-example-tutorial/src/app/app-routing.module.ts (246 bytes)
CREATE angular10-helloworld-example-tutorial/src/app/app.module.ts (393 bytes)
CREATE angular10-helloworld-example-tutorial/src/app/app.component.html (25757 bytes)
CREATE angular10-helloworld-example-tutorial/src/app/app.component.spec.ts (1152 bytes)
CREATE angular10-helloworld-example-tutorial/src/app/app.component.ts (241 bytes)
CREATE angular10-helloworld-example-tutorial/src/app/app.component.css (0 bytes)
CREATE angular10-helloworld-example-tutorial/e2e/protractor.conf.js (869 bytes)
CREATE angular10-helloworld-example-tutorial/e2e/tsconfig.json (299 bytes)
CREATE angular10-helloworld-example-tutorial/e2e/src/app.e2e-spec.ts (670 bytes)
CREATE angular10-helloworld-example-tutorial/e2e/src/app.po.ts (301 bytes)
√ Packages installed successfully.
Create Angular Service & Components
- ng g s hello-world
– ng g c hello-world
– ng g c menu
C:\Angular\Angular 10\angular10-helloworld-example-tutorial\src\app> ng g s hello-world
CREATE src/app/hello-world.service.spec.ts (378 bytes)
CREATE src/app/hello-world.service.ts (139 bytes)
C:\Angular\Angular 10\angular10-helloworld-example-tutorial\src\app>ng g c hello-world
CREATE src/app/hello-world/hello-world.component.html (26 bytes)
CREATE src/app/hello-world/hello-world.component.spec.ts (657 bytes)
CREATE src/app/hello-world/hello-world.component.ts (294 bytes)
CREATE src/app/hello-world/hello-world.component.css (0 bytes)
UPDATE src/app/app.module.ts (493 bytes)
C:\Angular\Angular 10\angular10-helloworld-example-tutorial\src\app>ng g c menu
CREATE src/app/menu/menu.component.html (19 bytes)
CREATE src/app/menu/menu.component.spec.ts (614 bytes)
CREATE src/app/menu/menu.component.ts (267 bytes)
CREATE src/app/menu/menu.component.css (0 bytes)
UPDATE src/app/app.module.ts (567 bytes)
– ng generate class Message
Here is the output of the above command:
C:\Angular\Angular 10\angular10-helloworld-example-tutorial\src\app>ng generate class Message
CREATE src/app/message.spec.ts (158 bytes)
CREATE src/app/message.ts (25 bytes)
C:\Angular\Angular 10\angular10-helloworld-example-tutorial\src\app>ng generate class Message
CREATE src/app/message.spec.ts (158 bytes)
CREATE src/app/message.ts (25 bytes)
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
http://localhost:8080/hello-world/api/v1/greeting
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>
npm package.json - Configure Dependencies
{ "name": "angular10-helloworld-example-tutorial", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~10.0.3", "@angular/common": "~10.0.3", "@angular/compiler": "~10.0.3", "@angular/core": "~10.0.3", "@angular/forms": "~10.0.3", "@angular/platform-browser": "~10.0.3", "@angular/platform-browser-dynamic": "~10.0.3", "@angular/router": "~10.0.3", "bootstrap": "^4.5.0", "jquery": "^3.5.1", "rxjs": "~6.5.5", "tslib": "^2.0.0", "zone.js": "~0.10.3" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1000.2", "@angular/cli": "~10.0.2", "@angular/compiler-cli": "~10.0.3", "@types/node": "^12.11.1", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", "codelyzer": "^6.0.0", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~5.0.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~3.3.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~3.9.5" } }
Main Index Html File
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angular10HelloworldExampleTutorial</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> </html>
Main (Bootstrap) File
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
Running Angular 10 Application
ng serve
ng serve --port 4204
Comments
Post a Comment
Leave Comment