Angular 10 Example Tutorial

Author:
In this tutorial, we will learn how to create a simple hello world single page application using Angular 10 as frontend and spring boot as backend.

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

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 a simple RESTFul web service application using Spring Boot. 
You can refer this article at https://www.javaguides.net/2019/04/spring-boot-2-hello-world-example.html
Make sure that you have created the 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 10.

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

2. Develop an Angular 10 App

Let's develop a step by step Web Application using Angular 10 which consumes below greeting Rest API.
http://localhost:8080/hello-world/api/v1/greeting
I assume that you have installed Node.js on your machine.  
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 10

To install or update Angular 10 CLI, type this command in the terminal:
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

Here is the output of the app:
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

Let's auto-generate the service and components using Angular CLI. Change your project directory to angular10-helloworld-example-tutorial\src\app and run the following commands:
- ng g s hello-world
– ng g c hello-world
– ng g c menu
Here is the output of the above commands:
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)
Create a modal folder and run the following command to generate Message.ts typescript class:
– 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)

Angular Project Structure

Below screenshot shows our angular project structure:

Integrate Bootstrap with Angular

Let's use npm to download Bootstrap & JQuery packages. The 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 the backend by calling below spring boot API.
http://localhost:8080/hello-world/api/v1/greeting
Update the hello-world.service.ts file inside the 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>

npm package.json - Configure Dependencies

Path: /package.json 
The package.json file contains project configuration information including package dependencies which get installed when you run npm install.
Note that angular version 10.0.3 in the dependencies section in the below file.
{
  "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

Path: /src/index.html
The main index.html file is the initial page loaded by the browser that kicks everything off. Webpack bundles all of the javascript files together and injects them into the body of the index.html page so the scripts get loaded and executed by the browser.
<!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

Path: /src/main.ts
The main file is the entry point used by angular to launch and bootstrap the application.
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

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 the below page on the screen.

Comments

Post a Comment