Angular 5 app setup and Routing

 

In this blog I am going to show you how to setup a Angular 5 app and how to create routing with its components. As you all know Angular is the powerful framework of Javascript, and it is basically a front end development computer language for SPA’s (Single Page Application).

Before I start about this setup process, assuming that you all have installed Node JS and NPM(Node Package Manager) in your machine as NPM will be our key feature to install Angular CLI(Command Line Interface). What is CLI? If you don’t know about CLI you can go through my previous blog where I have explained about CLI by clicking this link.

If you haven’t installed Node JS yet, install it first before install Angular app.

 

Install Angular

 

Open command prompt (cmd) for Windows, Terminal for Linux / MacOS. As I am using a windows machine, will use command prompt here.

Step 1

Open cmd, and type node -v to view the version of installed node and type npm -v to view the version of npm. If everything is ok. then install Angular CLI globally by typing npm install –g @angular/cli (-g for globally installation)

 

Step 2

Go to the project directory where you want to store your project, (eg. cd var/www/html/my-angular-project) and create a new project by typing the command ng new my-first-angular-app, which will take some times to create the project and the skeleton of application (it will install all its dependencies)

 

Step 3

Your installation is completed. Now go to the project directory by typing cd my-first-angular-app and serve the project on your browser by typing the command ng serve —open . If the app doesn’t run automatically to the browser, you can directly go to the browser and type http://localhost:4200/ (4200 is the port on which the app is running). Yay! now you can see your app is running like the following

You can edit your app by changing the files app.component.ts, app.component.html or app.component.css (Please note: If you edit any file and hit save CTRL+S, it will automatically compile and reload/refresh the app).

 

Routing between Components

 

Step 1

Create a file app.routes.ts within src/app folder. Open the file in any code/text editor and edit the file. Type the following codes in app.routes.ts file. We are assuming that all the components (.ts files) are within the same folder (src/app)

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component'; 
import { AboutComponent } from './about.component';
import { ProductComponent } from './product.component'; 
import { ContactComponent } from './contact.component'; 
import { ErrorComponent } from './error.component'; 

export const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },  
{ path: 'product/:id', component: ProductComponent },  
{ path: 'contact', component: ContactComponent },  
{ path: '**', component: ErrorComponent }

];

@NgModule({
imports: [  RouterModule.forRoot(routes)  ],
exports: [  RouterModule  ]

})

export class AppRoutingModule {

}

Now open app.module.ts file, and add the routing component to the app.module.ts by the following method.

..
..
import { AppRoutingModule } from './app.routes';
..
..

@NgModule({
..
..
imports: [
 ..,
 AppRoutingModule, 
 ..
],
})

Step 2

Now open app.component.html to edit for app router outlet (The dynamic section where all the routes will load dynamically). Edit the file like the following

<header></header>
<!-- all routing components will be visible at the below section dynamically -->
<router-outlet></router-outlet>
<footer></footer>

Now you have an Angular project with its routes. You can view the files by providing the full url with the routes names as suffix. For example

http://localhost:4200/home
http://localhost:4200/about
http://localhost:4200/product/55
http://localhost:4200/contact
http://localhost:4200/abcd /*This will load the ErrorComponent as there is no "abcd" route present*/

Or, you can view the routes by linking them with <a> anchor element tag such as following example

<a routerLink="/home">Home</a>
<a routerLink="/about">About us</a>
<a routerLink="/product/55">Products</a>
<a routerLink="/contact">Contact us</a>

 

That’s all

Please share if you like it!