Angular 8 Hello World Example Tutorial

In this tutorial, we will learn how to create a simple Hello World Angular 8 App development.

What we will build?

Basically, we will create two projects:

1. springboot-helloworld-application: This project is used to develop simple RESTFul API using Spring Boot 2.
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

We will create a simple RESTful web service with below endpoint using Spring boot:

http://localhost:8080/hello-world/api/v1/greeting

This REST API returns below JSON:

{"id":11,"content":"Hello, World!"}

I have already created a step by step tutorial to develop simple RESTFul web service application using Spring Boot. You can refer at https://www.javaguides.net/2019/04/spring-boot-2-hello-world-example.html

Make sure that you have created Spring boot REST API application using the above tutorial and run it on http://localhost:8080/.

Once your Spring boot REST API app is up and running then let's develop an angular client application using Angular 8.\

Now, we will create a step by step Angular 8 Application to consume this web service.

Angular 8 App Development

Let's develop a step by step Web Application using Angular 8 which consume below greeting Rest web service.

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 this commands.

C:\Angular>node -v
v10.15.3

C:\Angular>npm -v
6.9.0

Install the latest version of Angular CLI

To install or update Angular 7 CLI, type this command in the Terminal or Node Command Line.

npm install -g @angular/cli

Now, let's check the latest version of 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

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 below command to generate an Angular 8 Client application. We name this project as "angular8-helloworld-example-tutorial".

ng new angular8-helloworld-example-tutorial

Create Angular Service & Components

Let's auto-generate service and components using Angular CLI. Change your project directory to angular8-helloworld-example-tutorial\src\app and run the following commands:

- ng g s hello-world
– ng g c hello-world
– ng g c menu

Create a modal folder and run the following command to generate Message.ts typescript class:

– ng generate class Message

Angular Project Structure

Below screenshot shows our angular project structure:

Integrate Bootstrap with Angular

Use NPM to download Bootstrap & JQuery. Bootstrap and jQuery will be installed into the node_modules folder.

npm install bootstrap jquery --save

Configure installed Bootstrap & JQuery in an angular.json file:

...
 
"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"
]
 
...

If bootstrap.min.css won't work then import this bootstrap.min.css in a style.css file like this:

/* 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

The HelloWorldService will be used to get the data from backend by calling spring boot APIs. Update the hello-world.service.ts file inside src/app directory with the following code to it -

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

Let's create a Message model typescript to hold REST API response data and display on HTML template -

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 

The hello-world.component.ts defines the logic associated with 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

The hello-world.component.html defines the HTML template associated with the HelloWorldComponent.

<div class="container">
  Message from server ->  <h1>{{this.welcomeMessage}}</h1>
</div>

menu.component.ts -> MenuComponent

The menu.component.ts file defines the logic for the menu component, named 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

The menu.component.html defines the HTML template associated with the 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

The app.module.ts file defines the root module, named AppModule, that tells Angular how to assemble the application. Initially declares only the AppComponent. As you add more components to the app, they must be declared here.

Every application has at least one Angular module, the root module that you bootstrap to launch the application. By convention, it is usually called AppModule. Here is the code for 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

The app-routing.module.ts file defines the routing configuration in AppRoutingModule for Angular app:

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

The app.component.ts file defines the logic for the app's root component, named AppComponent. The view associated with this root component becomes the root of the view hierarchy as you add components and services to your application.

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

The app.component.html file defines the HTML template associated with the root AppComponent.

<app-menu></app-menu>
<router-outlet></router-outlet>

Running Angular 8 Application

Let's run the above developed Angular App with a command:

ng serve

By default, the Angular app runs on 4200 port but you can change default port with the following command:

ng serve --port 4204

Hit http://localhost:4200/ link in the browser will open below page on the screen.

The source code examples available on my GitHub Repository.