diff --git a/nesting.md b/nesting.md index 34856c7..0861e58 100644 --- a/nesting.md +++ b/nesting.md @@ -6,6 +6,7 @@ 1. Create components for two sub sections 1. Move the appropriate HTML to each sub section component 1. Create a router just for the sub sections +1. Replace the old main route with the new routing module ## Describe nested routes @@ -51,7 +52,7 @@ import { CareerComponent } from '../career/career.component'; const aboutRoutes: Routes = [ { - path: 'about', //note the path for the main section + path: 'about', component: AboutComponent, children: [ //create the sub sections (children) for this route { @@ -76,3 +77,44 @@ const aboutRoutes: Routes = [ }) export class AboutRoutingModule { } ``` + +## Replace the old main route with the new routing module + +Remove the `about` route in `src/app/app-routing.module.ts`: + +```javascript +const routes: Routes = [ + { + path: 'resume/:id', + component: ResumeComponent + }, + { + path: 'links', + component: LinksComponent + } +]; +``` + +And add the `about-routing.module.ts` module to `src/app/app.module.ts`: + +```javascript +import { AboutRoutingModule} from './about/about-routing.module' + +@NgModule({ + declarations: [ + AppComponent, + AboutComponent, + LinksComponent, + ResumeComponent, + EarlyLifeComponent, + CareerComponent + ], + imports: [ + BrowserModule, + AppRoutingModule, + AboutRoutingModule + ], + providers: [], + bootstrap: [AppComponent] +}) +``` diff --git a/router/src/app/app-routing.module.ts b/router/src/app/app-routing.module.ts index e7db1e1..fa4e9cc 100644 --- a/router/src/app/app-routing.module.ts +++ b/router/src/app/app-routing.module.ts @@ -6,10 +6,6 @@ import { LinksComponent } from './links/links.component'; import { ResumeComponent } from './resume/resume.component'; const routes: Routes = [ - { - path: 'about', - component: AboutComponent - }, { path: 'resume/:id', component: ResumeComponent diff --git a/router/src/app/app.module.ts b/router/src/app/app.module.ts index d23a44b..a028b6d 100644 --- a/router/src/app/app.module.ts +++ b/router/src/app/app.module.ts @@ -11,6 +11,8 @@ import { AppRoutingModule } from './app-routing.module'; import { EarlyLifeComponent } from './early-life/early-life.component'; import { CareerComponent } from './career/career.component' +import { AboutRoutingModule} from './about/about-routing.module' + @NgModule({ declarations: [ AppComponent, @@ -22,7 +24,8 @@ import { CareerComponent } from './career/career.component' ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + AboutRoutingModule ], providers: [], bootstrap: [AppComponent]