From 0c6639387f3573f3890bf1d489bfa1ba8c579564 Mon Sep 17 00:00:00 2001 From: Bruno Leonardo Michels Date: Sat, 16 Jun 2018 00:23:44 -0300 Subject: [PATCH] Add modules, components, routes --- src/app/about/about.component.html | 5 ++++ src/app/about/about.component.scss | 0 src/app/about/about.component.spec.ts | 25 ++++++++++++++++++++ src/app/about/about.component.ts | 15 ++++++++++++ src/app/about/about.module.spec.ts | 13 +++++++++++ src/app/about/about.module.ts | 11 +++++++++ src/app/about/about.router.ts | 12 ++++++++++ src/app/app.component.html | 8 +++++++ src/app/app.component.scss | 7 ++++++ src/app/app.router.ts | 26 +++++++++++++++++---- src/app/contact/contact.component.html | 4 ++++ src/app/contact/contact.component.scss | 0 src/app/contact/contact.component.spec.ts | 25 ++++++++++++++++++++ src/app/contact/contact.component.ts | 15 ++++++++++++ src/app/contact/contact.module.spec.ts | 13 +++++++++++ src/app/contact/contact.module.ts | 13 +++++++++++ src/app/contact/contact.router.ts | 12 ++++++++++ src/app/contact/form/form.component.html | 14 +++++++++++ src/app/contact/form/form.component.scss | 0 src/app/contact/form/form.component.spec.ts | 25 ++++++++++++++++++++ src/app/contact/form/form.component.ts | 25 ++++++++++++++++++++ src/app/heroes/heroes.component.html | 3 +++ src/app/heroes/heroes.component.scss | 0 src/app/heroes/heroes.component.spec.ts | 25 ++++++++++++++++++++ src/app/heroes/heroes.component.ts | 15 ++++++++++++ src/app/heroes/heroes.module.spec.ts | 13 +++++++++++ src/app/heroes/heroes.module.ts | 11 +++++++++ src/app/heroes/heroes.router.ts | 12 ++++++++++ src/app/shared/layout/layout.component.html | 4 +++- src/app/tutorials/tutorials.router.ts | 10 ++++---- 30 files changed, 349 insertions(+), 12 deletions(-) create mode 100644 src/app/about/about.component.html create mode 100644 src/app/about/about.component.scss create mode 100644 src/app/about/about.component.spec.ts create mode 100644 src/app/about/about.component.ts create mode 100644 src/app/about/about.module.spec.ts create mode 100644 src/app/about/about.module.ts create mode 100644 src/app/about/about.router.ts create mode 100644 src/app/contact/contact.component.html create mode 100644 src/app/contact/contact.component.scss create mode 100644 src/app/contact/contact.component.spec.ts create mode 100644 src/app/contact/contact.component.ts create mode 100644 src/app/contact/contact.module.spec.ts create mode 100644 src/app/contact/contact.module.ts create mode 100644 src/app/contact/contact.router.ts create mode 100644 src/app/contact/form/form.component.html create mode 100644 src/app/contact/form/form.component.scss create mode 100644 src/app/contact/form/form.component.spec.ts create mode 100644 src/app/contact/form/form.component.ts create mode 100644 src/app/heroes/heroes.component.html create mode 100644 src/app/heroes/heroes.component.scss create mode 100644 src/app/heroes/heroes.component.spec.ts create mode 100644 src/app/heroes/heroes.component.ts create mode 100644 src/app/heroes/heroes.module.spec.ts create mode 100644 src/app/heroes/heroes.module.ts create mode 100644 src/app/heroes/heroes.router.ts 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 @@
LayoutComponent - +
+ +
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 }], }, ];