diff --git a/nesting.md b/nesting.md index 6b8abb0..8faf184 100644 --- a/nesting.md +++ b/nesting.md @@ -14,3 +14,8 @@ Sometimes you want to have sub sections within a specific route (routes within r 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 +``` diff --git a/router/src/app/app.module.ts b/router/src/app/app.module.ts index b709dc2..d23a44b 100644 --- a/router/src/app/app.module.ts +++ b/router/src/app/app.module.ts @@ -7,14 +7,18 @@ import { LinksComponent } from './links/links.component'; import { ResumeComponent } from './resume/resume.component'; import { RouterModule } from '@angular/router'; -import { AppRoutingModule } from './app-routing.module' +import { AppRoutingModule } from './app-routing.module'; +import { EarlyLifeComponent } from './early-life/early-life.component'; +import { CareerComponent } from './career/career.component' @NgModule({ declarations: [ AppComponent, AboutComponent, LinksComponent, - ResumeComponent + ResumeComponent, + EarlyLifeComponent, + CareerComponent ], imports: [ BrowserModule, diff --git a/router/src/app/career/career.component.css b/router/src/app/career/career.component.css new file mode 100644 index 0000000..e69de29 diff --git a/router/src/app/career/career.component.html b/router/src/app/career/career.component.html new file mode 100644 index 0000000..c8dfecb --- /dev/null +++ b/router/src/app/career/career.component.html @@ -0,0 +1,3 @@ +

+ career works! +

diff --git a/router/src/app/career/career.component.spec.ts b/router/src/app/career/career.component.spec.ts new file mode 100644 index 0000000..1287910 --- /dev/null +++ b/router/src/app/career/career.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CareerComponent } from './career.component'; + +describe('CareerComponent', () => { + let component: CareerComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CareerComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CareerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/router/src/app/career/career.component.ts b/router/src/app/career/career.component.ts new file mode 100644 index 0000000..4430629 --- /dev/null +++ b/router/src/app/career/career.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-career', + templateUrl: './career.component.html', + styleUrls: ['./career.component.css'] +}) +export class CareerComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/router/src/app/early-life/early-life.component.css b/router/src/app/early-life/early-life.component.css new file mode 100644 index 0000000..e69de29 diff --git a/router/src/app/early-life/early-life.component.html b/router/src/app/early-life/early-life.component.html new file mode 100644 index 0000000..89f2425 --- /dev/null +++ b/router/src/app/early-life/early-life.component.html @@ -0,0 +1,3 @@ +

+ early-life works! +

diff --git a/router/src/app/early-life/early-life.component.spec.ts b/router/src/app/early-life/early-life.component.spec.ts new file mode 100644 index 0000000..f71c499 --- /dev/null +++ b/router/src/app/early-life/early-life.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EarlyLifeComponent } from './early-life.component'; + +describe('EarlyLifeComponent', () => { + let component: EarlyLifeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EarlyLifeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EarlyLifeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/router/src/app/early-life/early-life.component.ts b/router/src/app/early-life/early-life.component.ts new file mode 100644 index 0000000..aabf28e --- /dev/null +++ b/router/src/app/early-life/early-life.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-early-life', + templateUrl: './early-life.component.html', + styleUrls: ['./early-life.component.css'] +}) +export class EarlyLifeComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +}