📘 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.
- angular9-helloworld-example-tutorial: This project is used to develop single page application using Angular 9 as front-end technology. This Angular 9 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 9 Application to consume this web service.
Develop an Angular 9 App
http://localhost:8080/hello-world/api/v1/greeting
I assume that you have installed Node.js. Now, we need to check the Node.js and NPM versions. Open the terminal or Node command line then type these commands.C:\Angular>node -v
v10.15.3
C:\Angular>npm -v
6.9.0
Install the latest version of Angular CLI 9
To install or update Angular 9 CLI, type this command in the terminal:
npm install -g @angular/cli@9.0.0-rc.7
Note that we are installing Angular CLI 9.
Now, let's check the latest version of Angular CLI:
C:\Angular\angular9-springboot-crud-tutorial>ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 9.0.0-rc.7
Node: 10.15.3
OS: win32 x64
Angular:
...
Ivy Workspace:
Package Version
------------------------------------------------------
@angular-devkit/architect 0.900.0-rc.7
@angular-devkit/core 9.0.0-rc.7
@angular-devkit/schematics 9.0.0-rc.7
@schematics/angular 9.0.0-rc.7
@schematics/update 0.900.0-rc.7
rxjs 6.5.3
npm install -g @angular/cli@9.0.0-rc.7
C:\Angular\angular9-springboot-crud-tutorial>ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 9.0.0-rc.7
Node: 10.15.3
OS: win32 x64
Angular:
...
Ivy Workspace:
Package Version
------------------------------------------------------
@angular-devkit/architect 0.900.0-rc.7
@angular-devkit/core 9.0.0-rc.7
@angular-devkit/schematics 9.0.0-rc.7
@schematics/angular 9.0.0-rc.7
@schematics/update 0.900.0-rc.7
rxjs 6.5.3
Create an Angular 9 App using Angular CLI 9
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 9 Client application. We name this project as "angular9-helloworld-example-tutorial".
ng new angular9-helloworld-example-tutorial
ng new angular9-helloworld-example-tutorial
C:\Ramesh_Study\Angular\angular 9>ng new angular9-helloworld-example-tutorial
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE angular9-helloworld-example-tutorial/angular.json (3807 bytes)
CREATE angular9-helloworld-example-tutorial/package.json (1373 bytes)
CREATE angular9-helloworld-example-tutorial/README.md (1055 bytes)
CREATE angular9-helloworld-example-tutorial/tsconfig.json (535 bytes)
CREATE angular9-helloworld-example-tutorial/tslint.json (1953 bytes)
CREATE angular9-helloworld-example-tutorial/.editorconfig (246 bytes)
CREATE angular9-helloworld-example-tutorial/.gitignore (631 bytes)
CREATE angular9-helloworld-example-tutorial/browserslist (429 bytes)
CREATE angular9-helloworld-example-tutorial/karma.conf.js (1048 bytes)
CREATE angular9-helloworld-example-tutorial/tsconfig.app.json (210 bytes)
CREATE angular9-helloworld-example-tutorial/tsconfig.spec.json (270 bytes)
CREATE angular9-helloworld-example-tutorial/src/favicon.ico (948 bytes)
CREATE angular9-helloworld-example-tutorial/src/index.html (319 bytes)
CREATE angular9-helloworld-example-tutorial/src/main.ts (372 bytes)
CREATE angular9-helloworld-example-tutorial/src/polyfills.ts (2838 bytes)
CREATE angular9-helloworld-example-tutorial/src/styles.css (80 bytes)
CREATE angular9-helloworld-example-tutorial/src/test.ts (642 bytes)
CREATE angular9-helloworld-example-tutorial/src/assets/.gitkeep (0 bytes)
CREATE angular9-helloworld-example-tutorial/src/environments/environment.prod.ts (51 bytes)
CREATE angular9-helloworld-example-tutorial/src/environments/environment.ts (662 bytes)
CREATE angular9-helloworld-example-tutorial/src/app/app-routing.module.ts (246 bytes)
CREATE angular9-helloworld-example-tutorial/src/app/app.module.ts (393 bytes)
CREATE angular9-helloworld-example-tutorial/src/app/app.component.html (25705 bytes)
CREATE angular9-helloworld-example-tutorial/src/app/app.component.spec.ts (1149 bytes)
CREATE angular9-helloworld-example-tutorial/src/app/app.component.ts (240 bytes)
√ Packages installed successfully.
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>
npm package.json - Configure Dependencies
{ "name": "angular9-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": "~9.0.0-rc.7", "@angular/common": "~9.0.0-rc.7", "@angular/compiler": "~9.0.0-rc.7", "@angular/core": "~9.0.0-rc.7", "@angular/forms": "~9.0.0-rc.7", "@angular/platform-browser": "~9.0.0-rc.7", "@angular/platform-browser-dynamic": "~9.0.0-rc.7", "@angular/router": "~9.0.0-rc.7", "bootstrap": "^4.4.1", "jquery": "^3.4.1", "rxjs": "~6.5.3", "tslib": "^1.10.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.900.0-rc.7", "@angular/cli": "~9.0.0-rc.7", "@angular/compiler-cli": "~9.0.0-rc.7", "@angular/language-service": "~9.0.0-rc.7", "@types/node": "^12.11.1", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", "codelyzer": "^5.1.2", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~2.1.0", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.2", "protractor": "~5.4.2", "ts-node": "~8.3.0", "tslint": "~5.18.0", "typescript": "~3.6.4" } }
Main Index Html File
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angular9HelloworldExampleTutorial</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 9 Application
ng serve
ng serve --port 4204
Comments
Post a Comment
Leave Comment