Create New Project
Create new folder named learnangular5withrealapps and select to this folder in Visual Studio Code
Install Angular 6
Open Terminal windows in Visual Studio Code and type: npm install -g @angular/cli to install Angular 6
Structure of Project
Create Children Components
Create new folder, named components in src\app folder. In this folder, create children components as below:
Home Component
Create new folder named home in src\app\components folder. In this folder, create new TypeScript file named home.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
templateUrl: 'home.component.html'
})
export class HomeComponent implements OnInit {
data1: string;
ngOnInit() {
this.data1 = 'Hello Home Page';
}
}
Create new file, named home.component.html contains html for home page
<h3>Home Page</h3>
{{data1}}
About Us Component
Create new folder named aboutus in src\app\components folder. In this folder, create new TypeScript file named aboutus.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
templateUrl: 'aboutus.component.html'
})
export class AboutUsComponent implements OnInit {
data2: string;
ngOnInit() {
this.data2 = 'Hello About Us Page';
}
}
Create new file, named aboutus.component.html contains html for about us page
<h3>About Us Page</h3>
{{data2}}
News Component
Create new folder named news in src\app\components folder. In this folder, create new TypeScript file named news.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
templateUrl: 'news.component.html'
})
export class NewsComponent implements OnInit {
data3: string;
ngOnInit() {
this.data3 = 'Hello News Page';
}
}
Create new file, named news.component.html contains html for news page
<h3>News Page</h3>
{{data3}}
Define Routing
Create new TypeScript file, named app.routing.ts in src\app folder. This file contains routes of urls in template
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutUsComponent } from './components/aboutus/aboutus.component';
import { NewsComponent } from './components/news/news.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'home', component: HomeComponent },
{ path: 'aboutus', component: AboutUsComponent },
{ path: 'news', component: NewsComponent },
{ path: '**', redirectTo: '' }
];
export const routing = RouterModule.forRoot(routes);
Create Main Component
Create new TypeScript file, named app.component.ts in src\app folder.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
ngOnInit() {
}
}
Create HTML Template
Create new file, named app.component.html in src\app folder. This file is html template for application
<a [routerLink]="['/home']">Home</a> |
<a [routerLink]="['/aboutus']">About Us</a> |
<a [routerLink]="['/news']">News</a>
<br><br>
<router-outlet></router-outlet>
<br><br>
Copyright PMK Lab
Add Components and Routing to Module
In app.module.ts file in src\app folder. Add components and routing to module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { AboutUsComponent } from './components/aboutus/aboutus.component';
import { NewsComponent } from './components/news/news.component';
import { routing } from './app.routing';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutUsComponent,
NewsComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
routing
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
Run Application
In Terminal windows in Visual Studio Code and type: ng serve –open, program will open url http://localhost:4200/ on browser
Output
Home Page
About Us Page
News Page
References
I recommend you refer to the books below to learn more about the knowledge in this article:
- Pro Angular 6
- Angular 6 for Enterprise-Ready Web Applications: Deliver production-ready and cloud-scale Angular web apps
- ng-book: The Complete Guide to Angular
- Angular in Action
- Mastering TypeScript – Second Edition
- Pro TypeScript: Application-Scale JavaScript Development