Angular 6 routing tutorial

Why a separate routing module

1.Separation of Concerns

2.Maintainability

ng g c employee/create-employee --skipTests=false --flat=true

ng g c employee/list-employees --skipTests=false --flat=true

ng g m app-routing --flat=true --module=app

1. create routing module

2. add routing module into app.module

3. Import routerModule, Routes into app-routing.module

4. create routes in app-routing.module

   
   const appRoutes: Routes = [
   {path: 'list', component: },
   {path: 'create', component: },
   {path: '', redirectTo: '/list', pathMatch: 'full'}
   ]
   

5. Add navigation menu in root component(app.component.html)

6. Used three directives routerLinkActive, routerLink, router-outlet

7. routerLink asociated directive will be loaded into “router-outlet”

8. If you get ‘router-outlet’ is not a known element, add the “exports: [RouterModule]” into app-routing.module. Make it avilable the RouterModule into root module

Sample Download – Branch angularroute