Create a router just for the sub sections

master
Matt Huntington 9 years ago
parent d540f06efc
commit a780a0b515

@ -5,6 +5,7 @@
1. Describe nested routes 1. Describe nested routes
1. Create components for two sub sections 1. Create components for two sub sections
1. Move the appropriate HTML to each sub section component 1. Move the appropriate HTML to each sub section component
1. Create a router just for the sub sections
## Describe nested routes ## Describe nested routes
@ -36,3 +37,42 @@ and `src/app/career/career.component.html`:
<h3>Career</h3> <h3>Career</h3>
<p>Now I'm makin' it raaaiiiiiinnnn!!!</p> <p>Now I'm makin' it raaaiiiiiinnnn!!!</p>
``` ```
## Create a router just for the sub sections
Create `src/app/about/about-routing.module.ts`:
```javascript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about.component';
import { EarlyLifeComponent } from '../early-life/early-life.component';
import { CareerComponent } from '../career/career.component';
const aboutRoutes: Routes = [
{
path: 'about', //note the path for the main section
component: AboutComponent,
children: [ //create the sub sections (children) for this route
{
path: 'early-life',
component: EarlyLifeComponent
},
{
path: 'career',
component: CareerComponent
}
]
}
];
@NgModule({
imports: [
RouterModule.forChild(aboutRoutes)
],
exports: [
RouterModule
]
})
export class AboutRoutingModule { }
```

@ -0,0 +1,32 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about.component';
import { EarlyLifeComponent } from '../early-life/early-life.component';
import { CareerComponent } from '../career/career.component';
const aboutRoutes: Routes = [
{
path: 'about', //note the path for the main section
component: AboutComponent,
children: [ //create the sub sections (children) for this route
{
path: 'early-life',
component: EarlyLifeComponent
},
{
path: 'career',
component: CareerComponent
}
]
}
];
@NgModule({
imports: [
RouterModule.forChild(aboutRoutes)
],
exports: [
RouterModule
]
})
export class AboutRoutingModule { }
Loading…
Cancel
Save