Angular 2 - URLs and Navigation

Angular 2 URLs and Navigation

app.module.ts

• Line 3: You have to import the RouterModule and Routes libraries.
• Line 14: Add the "const: appRoutes: Routes..." as an array. Basically this is where you define the name of the url "directory" and it's corresponding component to go to when clicked.
• Line 19: When you need to add a url param "www.site.com/people/id=1" this is where you'll do this. Although, in the actual Angular app url it will look more like "www.site.com/people/id/1". Whatever. You say "tomato", I say "ketchup"....
• Line 35: Don't forget your buddy, @NgModule! Define your url router here.

nav.component.html

• Instead of traditional directory paths, use line 2 to link to home, and line 3 to route to any other location in your site

app.component.html

• For brevity's sake I just dumped the router-outlet tag (line 3) right into the app.component.html (the uber-root of the app). I bet it will ultimately end up in the app-nav tags when this is done....

index.html IMPORTANT!!!

• Code NOT listed below, I almost forgot! You need <base href="/"> in your index.html in order for the Angular navigation to work. The CLI SHOULD put that in there for you, but check it just to be sure.

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

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { MainComponent } from './main/main.component';
import { NavComponent } from './nav/nav.component';
import { AddstockComponent }  from './addstock/addstock.component';
import { DeletestockComponent }  from './deletestock/deletestock.component';
import { EditstockComponent }  from './editstock/editstock.component';
import { UserdetailsComponent } from './userdetails/userdetails.component';

const appRoutes: Routes = [
  {path: '', component:MainComponent},
  {path: 'addstock', component:AddstockComponent},
  {path: 'deletestock', component:DeletestockComponent},
  {path: 'editstock', component:EditstockComponent},
  {path: 'user/:id', component:UserdetailsComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    MainComponent,
    NavComponent,
    AddstockComponent,
    DeletestockComponent,
    EditstockComponent,
    UserdetailsComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

	<div class="container">
		<a href="#" class="nav-link" routerLink="/"><button class="btn btn-success">Home</button></a>  
		<a href="#" class="nav-link" routerLink="/addstock"><button class="btn btn-success">Add New Stock</button></a>
</div>

	<app-header></app-header>
<app-nav></app-nav>
<router-outlet></router-outlet>
<app-userdetails></app-userdetails>