Angular 13 – Creating a “Hello World” application
In this tutorial, we will show you how to create a “Hello World” application in Angular. It is often used to illustrate the basic syntax of the framework for a working web application.
Requirements
- Node.js: Make sure that you have installed it on your development machine. If you do not have it yet, you can download it on this page.
Table of contents:
- Install Angular Application
- Launch The Angular Application
- Create HelloWorld Component
- Modify HelloWorld Component
- Add Routing For HelloWorld Component
- Add Navigation Link And Router Outlet
- Run Your First HelloWorld Component
1. Install Angular Application
You first need to install Angular CLI, that is a command line interface tool for Angular. It is able to create a project, add files, etc.
If you have Angular CLI installed on your machine, please make sure that you have installed the latest version of Angular CLI. You can follow this “Upgrade Your Angular CLI to Latest Version” if needed.
If you have not Angular CLI installed on your machine, you install it using the below command:
npm install -g @angular/cli
Next, create a new Angular application:
ng new angular-hello-world-app
After you run the above command, Angular will ask you “Would you like to add Angular routing?“, and the answer should be Yes “y”. Basically we will use it to declare routes of the app.
2. Launch The Angular Application
Go to the root project directory and launch the application.
cd angular-hello-world-app
ng serve --open
The Angular application will be automatically opened on your browser on http://localhost:4200
. The application will also automatically reload if you change any of source files in the project.
3. Create HelloWorld Component
Run the following command to create HelloWorldComponent
.
ng generate component HelloWorld
4. Modify HelloWorld Component
Let’s write some text in the component and its template.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hello-world',
templateUrl: './hello-world.component.html',
styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {
title = 'Hello, World! Application';
constructor() { }
ngOnInit(): void {
}
}
and
<h1>
{{ title }}
</h1>
5. Add Routing For HelloWorld Component
Open app-routing.module.ts, import HelloWorldComponent, and set route path for the component.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world.component';
const routes: Routes = [
{ path: 'hello-world', component: HelloWorldComponent }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
6. Add Navigation Link And Router Outlet
<header>
<h1>Angular Example</h1>
</header>
<nav>
<ul class="nav">
<li><a routerLink="/hello-world">Hello World</a></li>
</ul>
</nav>
<section id="main-content">
<router-outlet></router-outlet>
</section>
In the code snippets above, we add the navigation link to HelloWorldComponent
router using routerLink
attribute and use <router-outlet>
tag to tell the router where to display routed views.
7. Run Your First HelloWorld Component
Now click on Hello, World!
link on the home page (http://localhost:4200
).
If you did it right, you should see “Hello, World! Application” in your web browser.