Routing In Angular 4

Introduction

Angular framework is mainly focused and good for the SPA (Single Page Architecture). It loads a single full HTML page and dynamically loads or updates the partial pages as per user request. And, that is achieved with the help of router. A set of partial page loading rule and urls is defined in router to render or load partial pages based on user request.    

 

I will explain the detailed concept of router in Angular 4.

Inside pakage.json

package.json is a file required to define all dependencies, build rule, build path, start up of server and application, etc. so, you are required to define the below dependencies for the Angular 4 router:

"@angular/router": "~4.0.0",

Under "dependencies" category, like below.

"author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",

    "angular-in-memory-web-api": "~0.3.0",
    "systemjs": "0.19.40",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.8.4"
  },

Inside systemjs.config.js

Router should be defined inside "map" of systemjs.config.js like below.

map: {
     // our app is within the app folder
     'app': 'app',

     // angular bundles
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

     // other libraries
     'rxjs':                      'npm:rxjs',
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
   },

Inside app folder

All folders, modules, and components remain inside the app folder. So, one main router file will be inside the app root folder where the other sub components' router details like routing path, strategy, etc. will be defined.

 

File name: app.routes.ts

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

import { dogRoutes }    from './dogs/dog.routes';
import { catRoutes }    from './cats/cat.routes';
import {birdRoutes} from './birds/bird.routes';

// Route Configuration
export const routes: Routes = [
  {
    path: '',
    redirectTo: '/dogs',
    pathMatch: 'full'
  },
  ...catRoutes,
  ...dogRoutes,
  ...birdRoutes
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

This app.routes.ts file will be imported inside app.module.ts file like below.

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { DogListComponent } from './dogs/dog-list.component';
import {CatListComponent} from './cats/cat-list.component'
import {BirdListComponent} from './birds/bird-list.component';

import { routing } from './app.routes';
import {MyFilterPipe} from './filter/MyFilterPipe';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    JsonpModule,
    routing
  ],
  declarations: [
    AppComponent,
    DogListComponent,
    CatListComponent,
    BirdListComponent,
    MyFilterPipe
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

And, main routing strategy will be defined inside app.component.ts file.

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


@Component({
  selector: 'my-app',
  template: `
   <div>
     <nav>
     <a class="mdl-navigation__link" [routerLink]="['/']">Home</a>
     <a class="mdl-navigation__link" [routerLink]="['/cats']">Cats</a>
     <a class="mdl-navigation__link" [routerLink]="['/dogs']">Dogs</a>
     <a class="mdl-navigation__link" [routerLink]="['/birds']">Birds</a>
    </nav>
    </div>
    <div>
      <router-outlet></router-outlet>
    </div>
  `,
})

// App Component class
export class AppComponent{}

Important point

 

Don't use the below line for the router as this is now deprecated.

import { provideRouter, RouterConfig } from '@angular/router';

The following lines have been introduced in place of the above deprecated line.

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

Don't use provider like below as it is deprecated now.

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

Below line has been introduced in place of the above line.

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

Sub-router

I have defined three sub-routes named cateRoutes, birdRoutes, and dogRoutes in the above main router "app.router.ts". So, sub routers should be defined like below,

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

import { BirdListComponent } from './bird-list.component';

export const birdRoutes: Routes = [
  { path: 'birds', component: BirdListComponent }
];

This router will import the corresponding component and define the path named "birds" to load its partial page defines inside the component like below,

import { Component } from '@angular/core';
import {Birds} from '../models/birds';

@Component({
  template: `
    <strong>Birds</strong>
    <p>List of Birds</p>
    <div>
      <ul>
       <li *ngFor="let bird of birds">
         {{bird.id}} {{bird.name}}
       </li>
      </ul>
    </div>
    `
})

export class BirdListComponent {
  birds: Birds[] = [
  {id: 11, name: 'Mr. Nice'},
  {id: 12, name: 'Narco'},
  {id: 13, name: 'Bombasto'},
  {id: 14, name: 'Celeritas'},
  {id: 15, name: 'Magneta'},
  {id: 16, name: 'RubberMan'},
  {id: 17, name: 'Dynama'},
  {id: 18, name: 'Dr IQ'},
  {id: 19, name: 'Magma'},
  {id: 20, name: 'Tornado'}
  ]
}

You can download and check other component's router details in more details from the attached code.

 

Steps to execute project

 

Node.js must be installed into your computer.

Download and unzip the code ~~ go to root folder "routingpractice" ~~ Open command prompt ~~ type "npm start"~~ It will start the server and execute the website on brower. 

 

Output


Conclusion

Routes and RouterModule are the important part of Angular 4's router. It is very easy and robust. It provides flexibility to create sub-router and call into one main router for the different components.