Setup Angular 5 app and routing

Hi friends this blog will be about the new technology called Angular 5. Angular is a JavaScript framework which is actually used to build single page applications that mean we can go to all the pages without reloading the web page. Angular is fast and easy to understand.

In this blog we will discuss about the routing of angular 5. Routing is basically the page url. Currently Angular have its latest version of 5. Let us start an app with Angular 5.

Setup

Before we start the setup process, we need to install Node JS. We are assuming that you all have already installed Node JS and NPM(Node Package Manager) in your machine as NPM will be our key to install Angular CLI(Command Line Interface).

Install Angular

Open command prompt (cmd) for Windows, Terminal for Linux / MacOS. As we are 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 install Angular CLI globally by typing npm install –g @angular/cli (-g for globally installation).

Commands in details

node -v (version of node installed)
npm -v (version of npm installed)
npm install -g @angular/cli (Install angular CLI via npm)

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 a few times to create the angular project and the skeleton of application (it will install all its dependencies via npm and store them in node_modules folder)

Commands in details

ng new my-first-app (create angular app by my-first-app name)

Step 3

Our installation is completed. Now we will go to the project directory by typing cd my-first-angular-app and serve the project on any 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). Now we can see our app is running.

Commands in details

ng serve --open (run the angular project on default url http://localhost:4200)
ng serve --host=127.0.0.0 (run the project in our desired ip address)
ng serve --host=127.0.0.0 --port=4201 (run the project in our desired port)

We now can edit our 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).

Angular Routing

Step 4

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 the newly created app.routes.ts file.

(app.routes.ts)

import { NgModule } from '@angular/core';

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

import { HomeComponent } from './home.component';

import { AboutComponent } from './about.component';

import { CategoryComponent } from './category.component';

import { ErrorComponent } from './error.component';

export const routes: Routes = [

{ path: '', redirectTo: 'home', pathMatch: 'full' },

{ path: 'home', component: HomeComponent },

{ path: 'about', component: AboutComponent },

{ path: 'category/:id', component: CategoryComponent },

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

(app.module.ts)

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

@NgModule({

imports: [

..,

AppRoutingModule,

})

Step 5

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

(app.component.html)

<header></header>

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

URLs

http://localhost:4200/home

http://localhost:4200/about

http://localhost:4200/category/321

http://localhost:4200/xyz /*This will load the ErrorComponent as there is no "xyz" route present*/

We 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="/category/321">Category</a>

That is all about the Angular 5 routing. Hope you like it. Please share this blog to make others aware of Angular routing. Thanks.

Header Ads

Setup Angular 5 app and routing

Setup