diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html
new file mode 100644
index 0000000..f3b046b
--- /dev/null
+++ b/src/app/about/about.component.html
@@ -0,0 +1,5 @@
+
+
+ This project shows you how to do things in Angular with full diff examples in commits/pull requests, with instructions included.
+
+
diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/about/about.component.spec.ts b/src/app/about/about.component.spec.ts
new file mode 100644
index 0000000..6b77344
--- /dev/null
+++ b/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 create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts
new file mode 100644
index 0000000..9a3c389
--- /dev/null
+++ b/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.scss']
+})
+export class AboutComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/about/about.module.spec.ts b/src/app/about/about.module.spec.ts
new file mode 100644
index 0000000..d78b18c
--- /dev/null
+++ b/src/app/about/about.module.spec.ts
@@ -0,0 +1,13 @@
+import { AboutModule } from './about.module';
+
+describe('AboutModule', () => {
+ let aboutModule: AboutModule;
+
+ beforeEach(() => {
+ aboutModule = new AboutModule();
+ });
+
+ it('should create an instance', () => {
+ expect(aboutModule).toBeTruthy();
+ });
+});
diff --git a/src/app/about/about.module.ts b/src/app/about/about.module.ts
new file mode 100644
index 0000000..90e5d05
--- /dev/null
+++ b/src/app/about/about.module.ts
@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { AboutComponent } from './about.component';
+import { RoutingModule } from './about.router';
+
+@NgModule({
+ imports: [RoutingModule, CommonModule],
+ declarations: [AboutComponent],
+})
+export class AboutModule {}
diff --git a/src/app/about/about.router.ts b/src/app/about/about.router.ts
new file mode 100644
index 0000000..132c7b1
--- /dev/null
+++ b/src/app/about/about.router.ts
@@ -0,0 +1,12 @@
+import { RouterModule, Routes } from '@angular/router';
+
+import { AboutComponent } from './about.component';
+
+const routes: Routes = [
+ {
+ path: '',
+ component: AboutComponent,
+ },
+];
+
+export const RoutingModule = RouterModule.forChild(routes);
diff --git a/src/app/app.component.html b/src/app/app.component.html
index f5ba585..f702993 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -10,6 +10,14 @@
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29..a6e9ac6 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,7 @@
+nav {
+ a {
+ &.active {
+ font-weight: bold;
+ }
+ }
+}
diff --git a/src/app/app.router.ts b/src/app/app.router.ts
index 16c0412..25b7a3e 100644
--- a/src/app/app.router.ts
+++ b/src/app/app.router.ts
@@ -1,5 +1,5 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
+
import { LayoutComponent } from './shared/layout/layout.component';
const routes: Routes = [
@@ -8,9 +8,25 @@ const routes: Routes = [
{
path: '',
component: LayoutComponent,
- children: [
- { path: 'tutorials', loadChildren: 'app/tutorials/tutorials.module#TutorialsModule' },
- ],
+ children: [{ path: 'about', loadChildren: 'app/about/about.module#AboutModule' }],
+ },
+
+ {
+ path: '',
+ component: LayoutComponent,
+ children: [{ path: 'contact', loadChildren: 'app/contact/contact.module#ContactModule' }],
+ },
+
+ {
+ path: '',
+ component: LayoutComponent,
+ children: [{ path: 'heroes', loadChildren: 'app/heroes/heroes.module#HeroesModule' }],
+ },
+
+ {
+ path: '',
+ component: LayoutComponent,
+ children: [{ path: 'tutorials', loadChildren: 'app/tutorials/tutorials.module#TutorialsModule' }],
},
];
diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html
new file mode 100644
index 0000000..8d9932d
--- /dev/null
+++ b/src/app/contact/contact.component.html
@@ -0,0 +1,4 @@
+I would love to get your feedback
+Disclaimer: this is just a mock form. If you want to contact me you can open an issue.
+
+
diff --git a/src/app/contact/contact.component.scss b/src/app/contact/contact.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/contact/contact.component.spec.ts b/src/app/contact/contact.component.spec.ts
new file mode 100644
index 0000000..427633e
--- /dev/null
+++ b/src/app/contact/contact.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactComponent } from './contact.component';
+
+describe('ContactComponent', () => {
+ let component: ContactComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ContactComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ContactComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/contact/contact.component.ts b/src/app/contact/contact.component.ts
new file mode 100644
index 0000000..7f6bb1e
--- /dev/null
+++ b/src/app/contact/contact.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-contact',
+ templateUrl: './contact.component.html',
+ styleUrls: ['./contact.component.scss']
+})
+export class ContactComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/contact/contact.module.spec.ts b/src/app/contact/contact.module.spec.ts
new file mode 100644
index 0000000..98933ee
--- /dev/null
+++ b/src/app/contact/contact.module.spec.ts
@@ -0,0 +1,13 @@
+import { ContactModule } from './contact.module';
+
+describe('ContactModule', () => {
+ let contactModule: ContactModule;
+
+ beforeEach(() => {
+ contactModule = new ContactModule();
+ });
+
+ it('should create an instance', () => {
+ expect(contactModule).toBeTruthy();
+ });
+});
diff --git a/src/app/contact/contact.module.ts b/src/app/contact/contact.module.ts
new file mode 100644
index 0000000..ee48350
--- /dev/null
+++ b/src/app/contact/contact.module.ts
@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { ContactComponent } from './contact.component';
+import { RoutingModule } from './contact.router';
+import { FormComponent } from './form/form.component';
+
+@NgModule({
+ imports: [RoutingModule, CommonModule, ReactiveFormsModule],
+ declarations: [ContactComponent, FormComponent],
+})
+export class ContactModule {}
diff --git a/src/app/contact/contact.router.ts b/src/app/contact/contact.router.ts
new file mode 100644
index 0000000..bbbed25
--- /dev/null
+++ b/src/app/contact/contact.router.ts
@@ -0,0 +1,12 @@
+import { RouterModule, Routes } from '@angular/router';
+
+import { ContactComponent } from './contact.component';
+
+const routes: Routes = [
+ {
+ path: '',
+ component: ContactComponent,
+ },
+];
+
+export const RoutingModule = RouterModule.forChild(routes);
diff --git a/src/app/contact/form/form.component.html b/src/app/contact/form/form.component.html
new file mode 100644
index 0000000..86daccb
--- /dev/null
+++ b/src/app/contact/form/form.component.html
@@ -0,0 +1,14 @@
+
diff --git a/src/app/contact/form/form.component.scss b/src/app/contact/form/form.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/contact/form/form.component.spec.ts b/src/app/contact/form/form.component.spec.ts
new file mode 100644
index 0000000..0ace80a
--- /dev/null
+++ b/src/app/contact/form/form.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormComponent } from './form.component';
+
+describe('FormComponent', () => {
+ let component: FormComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ FormComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FormComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/contact/form/form.component.ts b/src/app/contact/form/form.component.ts
new file mode 100644
index 0000000..29b0ce2
--- /dev/null
+++ b/src/app/contact/form/form.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+
+@Component({
+ selector: 'app-form',
+ templateUrl: './form.component.html',
+ styleUrls: ['./form.component.scss']
+})
+export class FormComponent {
+ contactForm = this.formBuilder.group({
+ email: this.formBuilder.control('', [Validators.required, Validators.email]),
+ message: this.formBuilder.control('', Validators.required),
+ });
+
+ constructor(private formBuilder: FormBuilder) { }
+
+ submit() {
+ if (this.contactForm.invalid) {
+ alert('the form is wrong');
+ return;
+ }
+
+ alert('hey, thanks!');
+ }
+}
diff --git a/src/app/heroes/heroes.component.html b/src/app/heroes/heroes.component.html
new file mode 100644
index 0000000..63d10ec
--- /dev/null
+++ b/src/app/heroes/heroes.component.html
@@ -0,0 +1,3 @@
+
+ heroes works!
+
diff --git a/src/app/heroes/heroes.component.scss b/src/app/heroes/heroes.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/heroes/heroes.component.spec.ts b/src/app/heroes/heroes.component.spec.ts
new file mode 100644
index 0000000..66518e4
--- /dev/null
+++ b/src/app/heroes/heroes.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroesComponent } from './heroes.component';
+
+describe('HeroesComponent', () => {
+ let component: HeroesComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ HeroesComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HeroesComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts
new file mode 100644
index 0000000..de4657b
--- /dev/null
+++ b/src/app/heroes/heroes.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-heroes',
+ templateUrl: './heroes.component.html',
+ styleUrls: ['./heroes.component.scss']
+})
+export class HeroesComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/heroes/heroes.module.spec.ts b/src/app/heroes/heroes.module.spec.ts
new file mode 100644
index 0000000..4b70ee0
--- /dev/null
+++ b/src/app/heroes/heroes.module.spec.ts
@@ -0,0 +1,13 @@
+import { HeroesModule } from './heroes.module';
+
+describe('HeroesModule', () => {
+ let heroesModule: HeroesModule;
+
+ beforeEach(() => {
+ heroesModule = new HeroesModule();
+ });
+
+ it('should create an instance', () => {
+ expect(heroesModule).toBeTruthy();
+ });
+});
diff --git a/src/app/heroes/heroes.module.ts b/src/app/heroes/heroes.module.ts
new file mode 100644
index 0000000..e6cb734
--- /dev/null
+++ b/src/app/heroes/heroes.module.ts
@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { HeroesComponent } from './heroes.component';
+import { RoutingModule } from './heroes.router';
+
+@NgModule({
+ imports: [RoutingModule, CommonModule],
+ declarations: [HeroesComponent],
+})
+export class HeroesModule {}
diff --git a/src/app/heroes/heroes.router.ts b/src/app/heroes/heroes.router.ts
new file mode 100644
index 0000000..1b81e6c
--- /dev/null
+++ b/src/app/heroes/heroes.router.ts
@@ -0,0 +1,12 @@
+import { RouterModule, Routes } from '@angular/router';
+
+import { HeroesComponent } from './heroes.component';
+
+const routes: Routes = [
+ {
+ path: '',
+ component: HeroesComponent,
+ },
+];
+
+export const RoutingModule = RouterModule.forChild(routes);
diff --git a/src/app/shared/layout/layout.component.html b/src/app/shared/layout/layout.component.html
index 322d54d..2f2053f 100644
--- a/src/app/shared/layout/layout.component.html
+++ b/src/app/shared/layout/layout.component.html
@@ -1,6 +1,8 @@
diff --git a/src/app/tutorials/tutorials.router.ts b/src/app/tutorials/tutorials.router.ts
index c906802..ed41995 100644
--- a/src/app/tutorials/tutorials.router.ts
+++ b/src/app/tutorials/tutorials.router.ts
@@ -1,15 +1,13 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { TutorialsComponent } from './tutorials.component';
+import { RouterModule, Routes } from '@angular/router';
+
import { InputComponent } from './input/input.component';
+import { TutorialsComponent } from './tutorials.component';
const routes: Routes = [
{
path: '',
component: TutorialsComponent,
- children: [
- { path: 'input', component: InputComponent },
- ],
+ children: [{ path: 'input', component: InputComponent }],
},
];