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
Now we will implement this with angular 2
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
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 { }
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
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 { }
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>
Nice article.
ReplyDelete