Angular 2 Routing Introduction


We use routing to separate different parts of our app, generally (but not always) by using the URL to denote our location. We might put our About page at the URL /about and our Home page at the root.

We will look at a few Angular 2 files that are needed to set up routing in Angular 2 in a simple website. Below are the two screen shots from the Chrome browser. All we are doing here is providing two very simple “hello world” style web pages that uses routing. Two links are provided at the top of each page as a menu. We are not focusing on how it looks right now.


The first file to consider is the index.html file that is at the root of our website file structure. Notice the tag my-app.

index.html

  <body>
    <base href="/">  
    <my-app>Loading AppComponent content here ...</my-app>
  </body>

The tag myapp above points to the selector in the app.component.ts file.

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <ul>
        <li><a routerLink="/">Home</a></li>
        <li><a routerLink="/about">About</a></li>
    </ul>
    <hr />
    <router-outlet></router-outlet>
  `,
})
export class AppComponent  {  
}

We need to add an app.routing.ts file to our project. This is located in the app folder, which is a child of the root of our project. Note that app.modules.ts are also in the same location on our server.

app.routing.ts

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

import {HomeComponent} from './components/home.component';
import {AboutComponent} from './components/about.component';

const appRoutes: Routes = [
        {
            path: '',
            component: HomeComponent
        },
        {
            path: 'about',
            component: AboutComponent
        }
];

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

app.modules.ts

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

import { AppComponent }  from './app.component';
import { HomeComponent }  from './components/home.component';
import { AboutComponent }  from './components/about.component';
import {routing} from './app.routing';

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

home.component.ts

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

@Component({
  selector: 'home',
  moduleId: module.id,
  template: `
      <h2>Home</h2>
  `,
})
export class HomeComponent  {
    }
}

Below is the About page.

about.component.ts

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

@Component({
  selector: 'about',
  template: `
    <h1>About app</h1>
  `,
})
export class AboutComponent  {
}

What’s Next?

Your website will likely have more than two pages. You can use this code as a base for creating several pages for your website. You will also likely want to style the menu.

After doing that you will probably want to separate out the HTML of each page into a separate file. To do this you just need to create an HTML file and use the TemplateUrl property to point to the file. The next post will show you how to do that, following along with this example.

Leave a comment

Your email address will not be published. Required fields are marked *