AngularJS 2.0 From Beginning - Route Part One - Day Thirteen

I am here to continue the discussion around AngularJS 2.0. So far, we have discussed about data binding, input properties, output properties, pipes, viewchild, and also about directives in Angular 2.0. Now in this article, I will discuss about the route concept in Angular 2.0. Also, in case you did not have a look at the previous articles of this series, go through the links mentioned below.

• AngularJS 2.0 From Beginning Introduction of AngularJS 2.0 (Day 1)
  
• AngularJS 2.0 From Beginning Component (Day 2)
• AngularJS 2.0 From Beginning Data Binding (Day 3)
• AngularJS 2.0 From Beginning Input Data Binding (Day 4)
• AngularJs 2.0 From Beginning - Output Property Binding (Day 5)
• AngularJs 2.0 From Beginning - Attribute Directive (Day 6)
• AngularJs 2.0 From Beginning - Structural Directives (Day 7)
• AngularJs 2.0 From Beginning - Pipes (Day 8)
  
• AngularJs 2.0 From Beginning - Viewchild (Day 9)
• AngularJs 2.0 From Beginning - Dynamic Grid (Day 10)
• AngularJs 2.0 From Beginning - Service (Day 11)
• AngularJs 2.0 From Beginning - ngContent (Day 12)
  

In my previous article, I already discussed about the transclusation in Angular 2.0. In this article, we will discuss about the route concept in Angular 2.0.

Angular 2.0 brings many improved modules to the Angular framework including a new router called the Component Router. The component router is totally configurable and feature packed router. Features included are standard view routing, nested child routes, named routes, and route parameters.

Why Routing ?

Routing allows us to specify some aspects of the application's state in the URL. Unlike with Server-side front-end solutions, this is optional - we can build full application without ever changing the URL. Adding routing, however, allows the user to go straight into certain aspects of the application. This is very convenient as it can keep your application linkable and bookmarkable, and allows users to share links with others.

Routing allows you to -

• Maintain the state of application
• Implement modular applications
• Implement the application based on the roles (certain roles have access to certain URLs)

Route Definition Objects

The Routes type is an array of routes that defines the routing for the application. This is where we can set up the expected paths, the components we want to use, and what we want our application to understand them as.

Each route can have different attributes. Some of the common attributes are.

• Path - URL to be shown in the browser when application is on the specific route
• Component - component to be rendered when the application is on the specific route
• redirectTo - redirects route if needed; each route can have either component or redirect attribute defined in the route (covered later in this chapter)
• pathMatch - optional property that defaults to 'prefix'; determines whether to match full URLs or just the beginning. When defining a route with empty path string set pathMatch to 'full', otherwise it will match all paths.
• children - array of route definitions objects representing the child routes of this route (covered later in this chapter)

To use Routes, create an array of route configurations.

const routes: Routes = [
  { path: 'component-one', component: ComponentOne },
  { path: 'component-two', component: ComponentTwo }
];

RouterModule

RouterModule.forRoot takes the Routes array as an argument and returns a configured router module. The following sample shows how we import this module in an app.routes.ts file. 

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

const routes: Routes = [
  { path: 'component-one', component: ComponentOne },
  { path: 'component-two', component: ComponentTwo }
];

export const routing = RouterModule.forRoot(routes);

We, then, import our routing configuration in the root of our application.

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

@NgModule({
  imports: [
    BrowserModule,
    routing
  ],
  declarations: [
    AppComponent,
    ComponentOne,
    ComponentTwo
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

Redirecting the Router to Another Route

When your application starts, it navigates to the empty route by default. We can configure the router to redirect to a named route by default.

export const routes: Routes = [
  { path: '', redirectTo: 'component-one', pathMatch: 'full' },
  { path: 'component-one', component: ComponentOne },
  { path: 'component-two', component: ComponentTwo }
];

The pathMatch property, which is required for redirects, tells the router how it should match the URL provided in order to redirect to the specified route. Since pathMatch: full is provided, the router will redirected to component-one if the entire URL matches the empty path ('').

When starting the application, it will now automatically navigate to the route for component-one.

RouterLink

Add links to routes using the RouterLink directive. For example, the following code defines a link to the route at path component-one.

<a routerLink="/component-one">Component One</a>

Alternatively, you can navigate to a route by calling the navigate function on the router.

this.router.navigate(['/component-one']);

Dynamically Adding Route Components

Rather than defining each route's component separately, use RouterOutlet which serves as a component placeholder; Angular dynamically adds the component for the route being activated into the <router-outlet></router-outlet> element.

<router-outlet></router-outlet>

In the above example, the component corresponding to the route specified will be placed after the <router-outlet></router-outlet> element when the link is clicked.

Now, to demonstrate the basic route, please see below.

app.component.cmputer.html

<div class="panel-body">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Company</th>
                <th class="text-right">Quantity</th>
                <th class="text-right">Price</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of data">
                <td>{{item.name}}</td>
                <td>{{item.company}}</td>
                <td class="text-right">{{item.quantity}}</td>
                <td class="text-right">{{item.price | currency}}</td>
            </tr>
        </tbody>
    </table>
</div>

app.component.computer.ts

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'computer',
    templateUrl: 'app.component.computer.html'
})

export class ComputerComponent implements OnInit {

    private data: Array<any> = [];

    constructor() {
        this.data = [{ name: 'HP Pavilion 15"', company: 'HP', quantity: '10', price: '42000.00', specification: 'Intel Core i3 2 GB Ram 500 GB HDD with Windows 10' },
        { name: 'Lenovo Flex 2"', company: 'Lenovo', quantity: '20', price: '32000.00', specification: 'Intel Core i3 2 GB Ram 500 GB HDD with DOS OS' },
        { name: 'Lenovo Yova 500"', company: 'Lenovo', quantity: '20', price: '70000.00', specification: 'Intel Core i7 8 GB Ram 1TB HDD with Windows 8.1' }]
    }

    ngOnInit(): void {
    }

}

app.component.mobile.html

<div class="panel-body">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Company</th>
                <th class="text-right">Quantity</th>
                <th class="text-right">Price</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of data">
                <td>{{item.name}}</td>
                <td>{{item.company}}</td>
                <td class="text-right">{{item.quantity}}</td>
                <td class="text-right">{{item.price |currency:'INR':true}}</td>
            </tr>
        </tbody>
    </table>
</div>

app.component.mobile.ts

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'mobile',
    templateUrl: 'app.component.mobile.html'
})

export class MobileComponent implements OnInit {

    private data: Array<any> = [];

    constructor() {
        this.data = [{ name: 'Galaxy Tab 3', company: 'Samsung', quantity: '10', price: '25000.00' },
        { name: 'Galaxy Tab 5', company: 'Samsung', quantity: '50', price: '55000.00' },
        { name: 'G4', company: 'LG', quantity: '10', price: '40000.00' },
        { name: 'Canvas 3', company: 'Micromax', quantity: '25', price: '18000.00' }];
    }

    ngOnInit(): void {
    }

}

app.component.tv.html

<div class="panel-body">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Company</th>
                <th class="text-right">Quantity</th>
                <th class="text-right">Price</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of data">
                <td>{{item.name}}</td>
                <td>{{item.company}}</td>
                <td class="text-right">{{item.quantity}}</td>
                <td class="text-right">{{item.price | currency}}</td>
            </tr>
        </tbody>
    </table>
</div>

app.component.tv.ts

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'tv',
    templateUrl: 'app.component.tv.html'
})

export class TvComponent implements OnInit {

    private data: Array<any> = [];

    constructor() {
        this.data = [{ name: 'LED TV 20"', company: 'Samsung', quantity: '10', price: '11000.00' },
        { name: 'LED TV 24"', company: 'Samsung', quantity: '50', price: '15000.00' },
        { name: 'LED TV 32"', company: 'LG', quantity: '10', price: '32000.00' },
        { name: 'LED TV 48"', company: 'SONY', quantity: '25', price: '28000.00' }];
    }

    ngOnInit(): void {
    }

}

app.component.home.html

<div class="row">
    <div class="panel-body">
        Home Page
        <br />
        <h3 class="panel-heading"><span>{{message}}</span></h3>
    </div>
</div>

app.component.home.ts

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'home',
    templateUrl: 'app.component.home.html'
})

export class HomeComponent implements OnInit {

    private message: string = '';
    constructor() {
        this.message = 'Click link to move other page';
    }

    ngOnInit(): void {
    }

}

app.component.homepage.html

<div class="rowDiv panel panel-primary">
    <h2 class="panel-heading">Demostration of Angular 2.0 Basic Route</h2>
    <table style="width:40%;">
        <tr class="table-bordered">
            <td><a routerLink="/home" class="btn-block">Home</a></td>
            <td><a routerLink="/mobile">Mobile</a></td>
            <td><a routerLink="/tv">TV</a></td>
            <td><a routerLink="/computer">Computers</a></td>
        </tr>
    </table>
</div>
<div class="rowDiv navbar-form">
    <router-outlet></router-outlet>
</div>

app.component.homepage.ts

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'home-page',
    templateUrl: 'app.component.homepage.html'
})

export class HomePageComponent implements OnInit {

    constructor() {
    }

    ngOnInit(): void {
    }

}

app.routes.ts

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './app.component.home';
import { MobileComponent } from './app.component.mobile';
import { TvComponent } from './app.component.tv';
import { ComputerComponent } from './app.component.computer';

export const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'tv', component: TvComponent },
    { path: 'mobile', component: MobileComponent },
    { path: 'computer', component: ComputerComponent }

];

export const appRoutingProviders: any[] = [

];

export const routing = RouterModule.forRoot(routes);

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";

import { routing, appRoutingProviders } from './src/app.routes';
import { HomePageComponent } from './src/app.component.homepage';
import { HomeComponent } from './src/app.component.home';
import { MobileComponent } from './src/app.component.mobile';
import { TvComponent } from './src/app.component.tv';
import { ComputerComponent } from './src/app.component.computer';

@NgModule({
    imports: [BrowserModule, FormsModule, routing],
    declarations: [HomePageComponent, HomeComponent, MobileComponent, TvComponent, ComputerComponent],
    bootstrap: [HomePageComponent],
    schemas: [NO_ERRORS_SCHEMA],
    providers: [appRoutingProviders],
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

 index.html

<!DOCTYPE html>
<html>
<head>
    <title>Angular2 - Basic router example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../resources/style/bootstrap.css" rel="stylesheet" />
    <link href="../resources/style/style1.css" rel="stylesheet" />
    <!-- Polyfill(s) for older browsers -->
    <script src="../resources/js/jquery-2.1.1.js"></script>
    <script src="../resources/js/bootstrap.js"></script>

    <script src="../node_modules/core-js/client/shim.min.js"></script>
    <script src="../node_modules/zone.js/dist/zone.js"></script>
    <script src="../node_modules/reflect-metadata/Reflect.js"></script>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) { console.error(err); });
    </script>
    <!-- Set the base href, demo only! In your app: <base href="/"> -->
    <script>document.write('<base href="' + document.location + '" />');</script>
</head>
<body>
    <home-page>Loading</home-page>
</body>
</html>

Now, run the code. The output is shown below.