Angular Routing

README.md

1. Create an angular project, when asked for Angular routing support, say "YES"
2. Create routes in app.module.ts
3. Write the [routerLinks] in app.component.html
4. Writer the in app.component.html
5. Make sure there is a line in the head section of app.component.html

app.component.html

<h1>{{ title }}</h1>

<ul>
  <li>
    <a [routerLink]="['/one']">One</a>
  </li>
  <li>
    <a [routerLink]="['/two']">Two</a>
  </li>
</ul>

<router-outlet></router-outlet>

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { OneComponent } from './one/one.component';
import { TwoComponent } from './two/two.component';
import { WelcomeComponent } from './welcome/welcome.component';

@NgModule({
  declarations: [
    AppComponent,
    OneComponent,
    TwoComponent,
    WelcomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot([
      {path: 'one', component: OneComponent },
      {path: 'two', component: TwoComponent },
      {path: 'welcome', component: WelcomeComponent },
      {path: '', redirectTo: 'welcome', pathMatch: 'full'}
    ], {useHash: true})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

one.component.ts

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

@Component({
  templateUrl: './one.component.html',
  styleUrls: ['./one.component.css']
})
export class OneComponent implements OnInit {

  title = "This is one component"
  constructor() { }

  ngOnInit() {
  }

}

two.component.ts

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

@Component({
  templateUrl: './two.component.html',
  styleUrls: ['./two.component.css']
})
export class TwoComponent implements OnInit {

  title = "Two Component works"
  constructor() { }

  ngOnInit() {
  }

}

welcome.component.ts

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

@Component({
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {

  title = "Welcome";
  constructor() { }

  ngOnInit() {
  }

}