Angular 2 Routes Tutorial With Example

In this article, I will explain Angular 2 Routes in a simple way using example. Components contains UI code and their respective logic. We can tell angular to load particular component on particular URL. Read below example

Example

Observe below diagram.

Home page shows 3 links ( /students, /teachers, /admin)
admin shows admin component
students page shows list of students with their id as URL
teachers page shows list of teachers with their id as URL

Click here see DEMO

Now we will implement this with angular 2

Project Setup

Read this article on Angular 2 project setup - http://blog.sodhanalibrary.com/2016/09/angular2-project-setup-for-development.html. Here we will add all app source files to app folder. Observe below screenshot.

Download project

You can download the project from github ( https://github.com/SodhanaLibrary/angular2-routes-example ).

Admin Flow

Lets start with admin flow. Create admin component like below in app folder.

admin.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'admin',
  template: '<h1>Admin component</h1>'
})
export class AdminComponent { }

Now we are ready with admin component. Now we have to define route for this

app.routing.ts

This file contains all routing info of the app. Lets add routing info for admin component.

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

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

const appRoutes: Routes = [
  {
    path: 'admin',
    component: AdminComponent
  },
  {
    path: '',
    component: HomeComponent
  },
  {
    path: '**',
    component: HomeComponent
  }
];

export const appRoutingProviders: any[] = [

];

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

Here you can observe the HomeComponent, this is the page which show up to user on home page load.

home.component.ts

This page basically contains all navigation links

import { Component } from '@angular/core';
@Component({
  template: `<nav>
      <a routerLink="/students" routerLinkActive="active">Students</a>
      <a routerLink="/teachers" routerLinkActive="active">Teachers</a>
      <a routerLink="/admin" routerLinkActive="active">Admin</a>
    </nav>`
})
export class HomeComponent { }

app.component.ts

Now we need to loads this components in router-outlet directive. router-outlet only supports the components specified in routs. Here we add router-outlet

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent { }

Now AppComponent is starting component for application. we have to bootstrap this.

app.module.ts

Here we will define app module with all components and routing information. Observe below code.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { routing,
         appRoutingProviders }  from './app.routing';

import { AdminComponent } from './admin/admin.component';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';

@NgModule({
  imports:      [ BrowserModule, routing ],
  declarations: [ AppComponent, AdminComponent, HomeComponent],
  bootstrap:    [ AppComponent ],
  providers:    [ appRoutingProviders ]
})
export class AppModule { }

AppComponent, AdminComponent, HomeComponent were added declarations. AppComponent is the starting component of the application, so we added this to bootstrap. routing information given to imports.

main.ts

Now we successfully created module with routing information. Its time to give this module to browser.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Students Flow

You have seen simple admin flow. Now I will explain the way we can add children to Routes. This routing information will be in app.routing.ts

{
    path: 'students',
    component: StudentsComponent,
    children: [
      {
        path:'',
        component : StudentListComponent
      },
      {
        path: ':id',
        component : StudentComponent
      }
    ]
}

Here StudentsComponent have only router-outlet directive. This directive loads StudentListComponent which is having of list students. When user clicks on those links, StudentComponent will display specific student information

Teachers Flow

We can create simply another module like app module and can be imported into app module. Here I have created entire teacher module separately and imported to app.module.ts.

teachers.module.ts

import { NgModule }      from '@angular/core';
import { routing,
         appRoutingProviders }  from './teachers.routing';

import { TeachersComponent } from './teachers.component';
import { TeacherComponent } from './teacher.component';
import { TeacherListComponent } from './teacherList.component';

@NgModule({
  imports:      [ routing ],
  declarations: [ TeachersComponent, TeacherComponent, TeacherListComponent ],
  providers:    [ appRoutingProviders ]
})
export class TeachersModule { }

It is the same way the app module was defined

Setting base href

One last important thing. We need to set base href for all routes defined above. For that we have to give base href in index.html

<html>
  <head>
    <base href="/">
    ............
  </head>
  <body>
    ......
  </body>
</html>

→	Convert XML or JSON to Java Pojo Classes
→	Change Icon Color Online

SodhanaLibrary