Angular Routing Basics

_angular-routing-basics.md

Code Examples for my Blog Post: Angular Routing Basics

The full Github repo can be found here: https://github.com/kevinchisholm/video-code-examples/tree/master/angular/routing/routing-basics

Video Demonstration

app.html

<nav id="main-nav">
    <ul>
        <li [routerLink]="[ '/home']" class="link">Home</li>
        <li [routerLink]="[ '/products']" class="link">Products</li>
        <li [routerLink]="[ '/about']" class="link">About</li>
    </ul>
</nav>
<router-outlet></router-outlet>

app.module.ts

import {NgModule} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {Http, HttpModule, BaseRequestOptions} from '@angular/http';
import {AppComponent} from './app.component';
import {HomeComponent} from '../home/home.component';
import {ProductsComponent} from '../products/products.component';
import {AboutComponent} from '../about/about.component';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';
import {routing} from './routes';

@NgModule({
  providers: [
    BaseRequestOptions,
    HttpModule,
    {provide: LocationStrategy, useClass: HashLocationStrategy},
  ],
  imports: [BrowserModule, HttpModule, routing],
  declarations: [
    AppComponent,
    HomeComponent,
    ProductsComponent,
    AboutComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

routes.ts

import {Routes, RouterModule} from '@angular/router';
import {AppComponent} from './app.component';
import {HomeComponent} from '../home/home.component';
import {ProductsComponent} from '../products/products.component';
import {AboutComponent} from '../about/about.component';

const routes: Routes = [
    {path: '', redirectTo: '/home', pathMatch: 'full'},
    {path: 'home', component: HomeComponent},
    {path: 'products', component: ProductsComponent},
    {path: 'about', component: AboutComponent},
];

export const routing = RouterModule.forRoot(routes);