Glen Smith

It’s time to introduce you to the Angular Router and get our menu routing to the various components in our application.

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] Let’s create a component for friends and messages

ng g c messages
ng g c friends

[ ] Now we’ll create a routing file app.routing.ts to setup all our routes in the app

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FeedComponent } from './feed';
import { FriendsComponent } from './friends';
import { MessagesComponent } from './messages';

const appRoutes: Routes = [
  { path: '',  redirectTo: '/feed',  pathMatch: 'full'},
  { path: 'feed', component: FeedComponent },
  { path: 'friends', component: FriendsComponent },
  { path: 'messages', component: MessagesComponent },
];

export const appRoutingProviders: any[] = [

];

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

[ ] Tell our module about this new routes in app.module.ts

import { routing,
     appRoutingProviders } from './app.routing';


providers: [ UserService, FeedService, appRoutingProviders ],
imports: [ BrowserModule, FormsModule, routing ],

[ ] Then update our app component html in app.component.html

<app-menu></app-menu>

<router-outlet></router-outlet>

[ ] Then we’ll need to update our menu to link to these new routes in menu.componont.html

<a class="item" routerLink="/feed" routerLinkActive="active">
    Home
</a>
<a class="item" routerLink="/messages" routerLinkActive="active">
    Messages
</a>
<a class="item" routerLink="/friends" routerLinkActive="active">
    Friends
</a>

[ ] Run application and celebrate

[ ] Tomorrow we’ll deep-route our User names