diff --git a/router/src/app/about/about.component.css b/router/src/app/about/about.component.css new file mode 100644 index 0000000..e69de29 diff --git a/router/src/app/about/about.component.html b/router/src/app/about/about.component.html new file mode 100644 index 0000000..17e2a33 --- /dev/null +++ b/router/src/app/about/about.component.html @@ -0,0 +1,3 @@ +

+ about works! +

diff --git a/router/src/app/about/about.component.spec.ts b/router/src/app/about/about.component.spec.ts new file mode 100644 index 0000000..3ed1800 --- /dev/null +++ b/router/src/app/about/about.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AboutComponent } from './about.component'; + +describe('AboutComponent', () => { + let component: AboutComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AboutComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AboutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/router/src/app/about/about.component.ts b/router/src/app/about/about.component.ts new file mode 100644 index 0000000..d8a4231 --- /dev/null +++ b/router/src/app/about/about.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-about', + templateUrl: './about.component.html', + styleUrls: ['./about.component.css'] +}) +export class AboutComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/router/src/app/app.module.ts b/router/src/app/app.module.ts index f657163..872bc4c 100644 --- a/router/src/app/app.module.ts +++ b/router/src/app/app.module.ts @@ -2,10 +2,16 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; +import { AboutComponent } from './about/about.component'; +import { LinksComponent } from './links/links.component'; +import { ResumeComponent } from './resume/resume.component'; @NgModule({ declarations: [ - AppComponent + AppComponent, + AboutComponent, + LinksComponent, + ResumeComponent ], imports: [ BrowserModule diff --git a/router/src/app/links/links.component.css b/router/src/app/links/links.component.css new file mode 100644 index 0000000..e69de29 diff --git a/router/src/app/links/links.component.html b/router/src/app/links/links.component.html new file mode 100644 index 0000000..893026c --- /dev/null +++ b/router/src/app/links/links.component.html @@ -0,0 +1,3 @@ +

+ links works! +

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

+ resume works! +

diff --git a/router/src/app/resume/resume.component.spec.ts b/router/src/app/resume/resume.component.spec.ts new file mode 100644 index 0000000..f8006d6 --- /dev/null +++ b/router/src/app/resume/resume.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ResumeComponent } from './resume.component'; + +describe('ResumeComponent', () => { + let component: ResumeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ResumeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ResumeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/router/src/app/resume/resume.component.ts b/router/src/app/resume/resume.component.ts new file mode 100644 index 0000000..074042e --- /dev/null +++ b/router/src/app/resume/resume.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-resume', + templateUrl: './resume.component.html', + styleUrls: ['./resume.component.css'] +}) +export class ResumeComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/routing.md b/routing.md index 94051c5..3951cf2 100644 --- a/routing.md +++ b/routing.md @@ -4,6 +4,7 @@ 1. Create a new angular app 1. Clean up app HTML +1. Create About, Links, and Resume components ## Create a new angular app @@ -29,3 +30,13 @@ Go into `src/app/app.component.html` and change the HTML to: ```html

Welcome To My Personal Site

``` + +## Create About, Links, and Resume components + +We'll create a component for the different "sections" of the site we want to "navigate" to. + +``` +ng generate component about +ng generate component links +ng generate component resume +```