From e5b2d06d9ca453d126eb8cf4f9cc9d1db6a7e4d2 Mon Sep 17 00:00:00 2001 From: Raghu-Ch Date: Thu, 25 May 2017 20:51:10 -0400 Subject: [PATCH] Add basic routing & angular material, upgrade CLI version --- README.md | 4 +-- package.json | 3 ++- src/app/app-routing.module.ts | 9 ++++--- src/app/app.component.html | 4 +-- src/app/app.module.ts | 6 ++++- src/app/home/home.component.css | 0 src/app/home/home.component.html | 1 + src/app/home/home.component.spec.ts | 25 +++++++++++++++++++ src/app/home/home.component.ts | 15 +++++++++++ .../materialdesign/materialdesign.module.ts | 3 +++ .../pagenotfound/pagenotfound.component.ts | 16 ++++++++++++ 11 files changed, 76 insertions(+), 10 deletions(-) create mode 100644 src/app/home/home.component.css create mode 100644 src/app/home/home.component.html create mode 100644 src/app/home/home.component.spec.ts create mode 100644 src/app/home/home.component.ts create mode 100644 src/app/pagenotfound/pagenotfound.component.ts diff --git a/README.md b/README.md index da8cc14..604304d 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,8 @@ Weirdbeard is a web application featuring search for beard styles, best products for beard care, finding nearest beard barber and discussion board for the registered customers. -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.3. +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.6. ## prerequisites -Angular, Typescript, Nodejs, Bootstrap. \ No newline at end of file +Angular, Typescript, Nodejs, Angular-Material. \ No newline at end of file diff --git a/package.json b/package.json index b5911d7..60a6a81 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", + "@angular/flex-layout": "^2.0.0-beta.8", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/material": "^2.0.0-beta.5", @@ -28,7 +29,7 @@ "zone.js": "^0.8.4" }, "devDependencies": { - "@angular/cli": "1.0.3", + "@angular/cli": "^1.0.6", "@angular/compiler-cli": "^4.0.0", "@types/hammerjs": "^2.0.34", "@types/jasmine": "2.5.38", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 5b7d25b..656b3fa 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,11 +1,12 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; +import { HomeComponent } from 'app/home/home.component'; +import { PageNotFoundComponent } from 'app/pagenotfound/pagenotfound.component'; const routes: Routes = [ - { - path: '', - children: [] - } + { path: 'home', component: HomeComponent }, + { path: '', redirectTo: 'home', pathMatch: 'full' }, + { path: '**', component: PageNotFoundComponent } ]; @NgModule({ diff --git a/src/app/app.component.html b/src/app/app.component.html index 6ea12be..cf8163c 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,4 @@ -

+ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0020dc1..4747129 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,10 +6,14 @@ import { HttpModule } from '@angular/http'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { MaterialdesignModule } from 'app/materialdesign/materialdesign.module'; +import { HomeComponent } from './home/home.component'; +import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component'; @NgModule({ declarations: [ - AppComponent + AppComponent, + HomeComponent, + PageNotFoundComponent ], imports: [ BrowserModule, diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html new file mode 100644 index 0000000..7544857 --- /dev/null +++ b/src/app/home/home.component.html @@ -0,0 +1 @@ +

home page

diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts new file mode 100644 index 0000000..86774ae --- /dev/null +++ b/src/app/home/home.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts new file mode 100644 index 0000000..cc6fdd3 --- /dev/null +++ b/src/app/home/home.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'wb-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.css'] +}) +export class HomeComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/materialdesign/materialdesign.module.ts b/src/app/materialdesign/materialdesign.module.ts index ed602a9..4763a7f 100644 --- a/src/app/materialdesign/materialdesign.module.ts +++ b/src/app/materialdesign/materialdesign.module.ts @@ -1,6 +1,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MaterialModule } from '@angular/material'; +import { FlexLayoutModule } from '@angular/flex-layout'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import 'hammerjs'; @@ -8,10 +9,12 @@ import 'hammerjs'; imports: [ CommonModule, MaterialModule, + FlexLayoutModule, BrowserAnimationsModule ], exports: [ MaterialModule, + FlexLayoutModule, BrowserAnimationsModule ], declarations: [] diff --git a/src/app/pagenotfound/pagenotfound.component.ts b/src/app/pagenotfound/pagenotfound.component.ts new file mode 100644 index 0000000..c577153 --- /dev/null +++ b/src/app/pagenotfound/pagenotfound.component.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'wb-pagenotfound', + template: ` +

+ warningPage not found! +

+ `, + styles: [` + .warning { font-size: 30px;} + .spacer { margin-left: 10px;} + ` + ] +}) +export class PageNotFoundComponent { }