You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
2.7 KiB
121 lines
2.7 KiB
# Nesting
|
|
|
|
## Lesson Objectives
|
|
|
|
1. Describe nested routes
|
|
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
|
|
|
|
Sometimes you want to have sub sections within a specific route (routes within routes). We can accomplish this with nested routes.
|
|
|
|
## Create components for two sub sections
|
|
|
|
We're going to split `/about` into `/about/early-life` and `/about/career`.
|
|
|
|
Generate the two components:
|
|
|
|
```
|
|
ng generate component early-life
|
|
ng generate component career
|
|
```
|
|
|
|
## Move the appropriate HTML to each sub section component
|
|
|
|
Cut the HTML from `src/app/about/about.component.html` and paste into `src/app/early-life/early-life.component.html`:
|
|
|
|
```html
|
|
<h3>Early Life</h3>
|
|
<p>Just a kid growing up rough on the streets. Hustlin' code for ca$h</p>
|
|
```
|
|
|
|
and `src/app/career/career.component.html`:
|
|
|
|
```html
|
|
<h3>Career</h3>
|
|
<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',
|
|
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 { }
|
|
```
|
|
|
|
## 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]
|
|
})
|
|
```
|