Forward Advance Learning

Routing

Routing lets us make use of the address bar to control our app. This gives us several big advantages:

  1. A working back button - you can go to a previous URL
  2. Sharable links, you can sent the link to a friend.

RouterModule

Routing in Angular is rich and deep. If you used UIRouter in Angular one, many of the features will be familiar to you.

  • Define routes and associated components
  • Pass data from the route to the component
  • Embed data in the route
  • Nest routes, one inside the other
  • Create a default 404 route
  • Discover if a particular route or route segment is active and style a link accordingly.
  • Inject data from the route anywhere in the app.

Defining Routes

We define our routes in an array, like so:

import { CatPageComponent } from './cat.page.component';
import { HomePageComponent } from './home.page.component';
import { PageNotFoundComponent } from './404.page.component';
const appRoutes: Routes = [
{path: '', component: HomePageComponent },
{path: 'cat', component: CatPageComponent },
{ path: '**', component: PageNotFoundComponent }
]

Routes are matched in order. The first matching route will be activated, and the router will stop looking for more routes. Order of routes matters. This is especially important if you have split your routes over several modules. You must include your PageNotFoundComponent route last of all.

Making the Router Module

We then use this array to make a router module for our app, like so:

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Including in our app

Then we include the routing module in our app just like any other module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [ BrowserModule, AppRoutingModule],
bootstrap: [AppComponent]
})
export class AppModule { }

The Template

We link to our new routes using <a routerLink="cat">Cat</a>. The selected component will be inserted in the <router-outlet> element.

<header>
<a routerLink="">Home</a>
<a routerLink="cat">Cat</a>
</header>
<router-outlet></router-outlet>

We can add a class to a link with the routerLinkActive directive:

<a routerLink="genes" routerLinkActive="active">Gene Search</a>

In our SCSS we then do something like this:

a {
display:inline-block;
color:black;
padding:10px;
&:hover {
background:black;
color:white;
}
}

NG-CLI

We can use the ng-cli to get a start on a routed app. Run the generator with the --routing flag to build a routing module.

ng new my-app --routing --style scss --prefix app

If you start your app with ng serve, the index.html filte will be served for all urls that you hit directly.

Exercise - ng-cli

Generate a new routed app using the ng-cli.

ng new my-app --routing --style scss --prefix app

Generate components and create routes for Home, About, Contact and PageNotFound.

(Optionally create routes for Inventory, Location and Hero).

Make a header component which you can use to navigate between the components.

Add styling to the header. Highlight the link you are currently on.

Optionally add a footer with the same links.