From a32eaf530a6c69b463721611bfe935aaa9aec722 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vlado=20Te=C5=A1anovi=C4=87?= Date: Thu, 9 Jun 2016 19:14:44 +0200 Subject: [PATCH] Added router, and two components --- app/app.component.ts | 31 +++++++++++++++++++ .../about.component.css} | 0 app/components/about/about.component.html | 3 ++ app/components/about/about.component.ts | 11 +++++++ app/components/home/home.component.css | 0 .../home.component.html} | 2 +- .../home.component.ts} | 10 +++--- app/main.ts | 11 +++++-- package.json | 2 +- public/index.html | 11 ------- public/js/bundle.min.js | 19 ++++++------ tsconfig.json | 4 +-- typings.json | 4 +-- 13 files changed, 73 insertions(+), 35 deletions(-) create mode 100644 app/app.component.ts rename app/components/{app.component.css => about/about.component.css} (100%) create mode 100644 app/components/about/about.component.html create mode 100755 app/components/about/about.component.ts create mode 100644 app/components/home/home.component.css rename app/components/{app.component.html => home/home.component.html} (79%) rename app/components/{app.component.ts => home/home.component.ts} (55%) diff --git a/app/app.component.ts b/app/app.component.ts new file mode 100644 index 0000000..b2ae50c --- /dev/null +++ b/app/app.component.ts @@ -0,0 +1,31 @@ +import { Component, Type } from '@angular/core'; +import { ROUTER_DIRECTIVES, Routes, Router } from '@angular/router'; + +import { HomeComponent } from './components/home/home.component' +import { AboutComponent } from './components/about/about.component' + +@Component({ + directives: [ROUTER_DIRECTIVES], + providers: [Location], + selector: 'my-app', + styles: [`h1 { + color: white; + background: darkgray; + padding: 20px; +} +.router-link-active { font-weight: bold }`], + template: ` +

My First {{name}} app

+ + +Home | About`, +}) +@Routes([ + { component: HomeComponent, path: "/" }, + { component: AboutComponent, path: "/about" } +]) +export class AppComponent { + name: string = "Angular 2 on Express"; + + constructor(private router: Router) {} +} \ No newline at end of file diff --git a/app/components/app.component.css b/app/components/about/about.component.css similarity index 100% rename from app/components/app.component.css rename to app/components/about/about.component.css diff --git a/app/components/about/about.component.html b/app/components/about/about.component.html new file mode 100644 index 0000000..e58bfde --- /dev/null +++ b/app/components/about/about.component.html @@ -0,0 +1,3 @@ +

Page: {{name}}

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper feugiat velit in aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam dictum sodales dui vehicula convallis. Donec mattis pharetra lacus feugiat ultrices. Curabitur placerat interdum ligula, quis suscipit velit iaculis at. Etiam mollis ex et cursus elementum. Suspendisse nec elit ante. Praesent pharetra pharetra tellus, rutrum lobortis odio viverra vitae.

\ No newline at end of file diff --git a/app/components/about/about.component.ts b/app/components/about/about.component.ts new file mode 100755 index 0000000..50d593e --- /dev/null +++ b/app/components/about/about.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; +@Component({ + selector: 'my-about', + templateUrl: 'components/about/about.component.html', + styleUrls: ['components/about/about.component.css'] +}) +export class AboutComponent { + name: string = "About Us"; + + constructor() {} +} \ No newline at end of file diff --git a/app/components/home/home.component.css b/app/components/home/home.component.css new file mode 100644 index 0000000..e69de29 diff --git a/app/components/app.component.html b/app/components/home/home.component.html similarity index 79% rename from app/components/app.component.html rename to app/components/home/home.component.html index 7ab2e97..1013afb 100644 --- a/app/components/app.component.html +++ b/app/components/home/home.component.html @@ -1,4 +1,4 @@ -

My First {{name}} app

+

Page: {{name}}

Response from server: /users
{{ ( users | async)?.name }}
diff --git a/app/components/app.component.ts b/app/components/home/home.component.ts similarity index 55% rename from app/components/app.component.ts rename to app/components/home/home.component.ts index 9a8d456..68da00d 100755 --- a/app/components/app.component.ts +++ b/app/components/home/home.component.ts @@ -3,12 +3,12 @@ import { Http } from "@angular/http"; import 'rxjs/add/operator/map'; @Component({ - selector: 'my-app', - templateUrl: 'components/app.component.html', - styleUrls: ['components/app.component.css'] + selector: 'my-home', + templateUrl: 'components/home/home.component.html', + styleUrls: ['components/home/home.component.css'] }) -export class AppComponent { - name: string = "Angular 2 on Express"; +export class HomeComponent { + name: string = "Home page"; users: {}; constructor(http: Http) { diff --git a/app/main.ts b/app/main.ts index 7e4c38e..fbf1c80 100644 --- a/app/main.ts +++ b/app/main.ts @@ -1,8 +1,13 @@ import { bootstrap } from '@angular/platform-browser-dynamic'; -import { AppComponent } from './components/app.component' -import { Type } from '@angular/core'; +import { Type, provide } from '@angular/core'; import { HTTP_PROVIDERS } from "@angular/http"; +import { ROUTER_PROVIDERS } from '@angular/router'; +import { HashLocationStrategy, LocationStrategy } from "@angular/common"; + +import { AppComponent } from './app.component' bootstrap(AppComponent, [ - HTTP_PROVIDERS + HTTP_PROVIDERS, + ROUTER_PROVIDERS, + provide(LocationStrategy, {useClass: HashLocationStrategy}) ]); \ No newline at end of file diff --git a/package.json b/package.json index b953430..2cf838d 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "concurrently": "^2.0.0", "systemjs-builder": "^0.15.17", "typescript": "^1.8.10", - "typings": "^0.8.1", + "typings": "^1.0.4", "yargs": "^4.7.1" } } diff --git a/public/index.html b/public/index.html index 2b5fc4a..5680389 100755 --- a/public/index.html +++ b/public/index.html @@ -12,20 +12,9 @@