Introduction to routing

Routing is mapping between a URL and the content to be displayed when a request is sent to that address. It’s a good practice to keep it in one place so that it’s easier to find, modify and extend the configuration. Angular 2 offers such a feature out of the box:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { SubpageComponent } from "./components/subpage.component";

@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot([ { path: 'subpage', component: SubpageComponent } ])
],
declarations: [ AppComponent, SubpageComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}

In line 11 we can see the routing configuration: when a URL’s path is “subpage”, then we want SubpageComponent to be displayed. Paths are relative to the base set in index.html:

<!DOCTYPE html>
<html>
<head>
<title>My app</title>
<base href="/app">
...

The route’s component won’t occupy the whole page. Layout is determined by the host, AppComponent in this case:


import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<h1>Main page</h1>
<a routerLink='subpage' routerLinkActive='active'>Another page</a>
<router-outlet></router-outlet>
`,
styles: ['.active { color: fuchsia; }']
})
export class AppComponent  {}

The page template contains only a header and a link. routerLink contains the path  which the link redirects to. When we get there, the page will contain both a header and a link from here and a template of the component associated with that path, rendered right below the router-outlet element. router-outlet is a placeholder which determines where to render a template of the current route’s component. This feature is essential for all pages to contain some common parts e.g. a menu. routerLinkActive is an optional attribute which says what class will be added to the link when its route is visited – useful when we want to visually indicate where a user is in the application.

So if the subpage component looks like this:

import { Component } from '@angular/core';

@Component({
selector: 'subpage',
template: `
<div>Subpage is here</div>
<a routerLink="/">Main page</a>
`
})
export class SubpageComponent {}

Then both pages will look like these:

Routing main page

Routing-subpage

That’s it. There is also an alternative called UI-Router. It extends the configuration with states – named routes, which can get some additional data from outside of a URL and make up a hierarchy. I know it from my previous experience with AngularJS, but in this small application I’ll try the basic version – at least to have an argument to hate it. 😉

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s