_angular-starter-project-basic-routing.md

Code Examples for my Blog Post: Angular Starter Project with Basic Routing

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

Setup

• Clone this repo:

git clone git@github.com:kevinchisholm/video-code-examples.git

• Move into the project directory:

cd angular/starter-projects/routing-basic/

• Install Dependencies:

npm install

Local Web Server Instructions

Start the local web server:

npm start

Open the example web page:

http://localhost:3000/

example-1.js

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 {Route1Component} from '../route1/route1.component';
import {Route2Component} from '../route2/route2.component';
import {Route3Component} from '../route3/route3.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,
    Route1Component,
    Route2Component,
    Route3Component
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

example-2.js

import {Routes, RouterModule} from '@angular/router';
import {AppComponent} from './app.component';
import {Route1Component} from '../route1/route1.component';
import {Route2Component} from '../route2/route2.component';
import {Route3Component} from '../route3/route3.component';

const routes: Routes = [
    {path: '', redirectTo: '/route1', pathMatch: 'full'},
    {path: 'route1', component: Route1Component},
    {path: 'route2', component: Route2Component},
    {path: 'route3', component: Route3Component},
];

export const routing = RouterModule.forRoot(routes);

example-3.html

<section class="page-content">
    <h1>Route 3</h1>
    <p>
    Fusce pretium interdum tempus. Cras eu ex volutpat, luctus enim at, rutrum dui. Suspendisse interdum, est sed vehicula rhoncus, eros nisl pellentesque elit, rhoncus laoreet quam metus ac nunc. Aenean scelerisque nibh nec erat iaculis, nec interdum urna ornare. Donec tincidunt lobortis nulla, ut ultricies quam hendrerit eget. Ut ac laoreet risus. Etiam bibendum quam et elit ultricies, non pharetra turpis luctus. Fusce tempus ipsum velit, in tincidunt libero mollis in.
    </p>
</section>

example-3.js

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

@Component({
  selector: 'route1',
  templateUrl: 'src/route1/route1.html'
})
export class Route1Component {
  constructor() {   

  }

  public ngOnInit () {

  }
}