From 6788c30d7e2e3e2ae599cc879d7b82dcb0dcfe48 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 15 Jan 2017 16:38:43 +0900 Subject: [PATCH 01/44] =?UTF-8?q?=E5=A4=89=E6=95=B0=E3=82=92=E5=AE=9A?= =?UTF-8?q?=E7=BE=A9=E3=81=97=E3=81=A6component=E3=81=AB=E8=A1=A8=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 7 +++++-- npm-debug.log | 47 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+), 2 deletions(-) create mode 100644 npm-debug.log diff --git a/app/app.component.ts b/app/app.component.ts index 4c06d2f..f7f1b84 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -1,6 +1,9 @@ import { Component } from '@angular/core'; @Component({ selector: 'my-app', - template: '

My First Angular App

' + template: '

{{title}}

{{hero}} details!

' }) -export class AppComponent { } +export class AppComponent { + title = 'Tour of Heroes'; + hero = 'Windstorm'; +} diff --git a/npm-debug.log b/npm-debug.log new file mode 100644 index 0000000..51b6c85 --- /dev/null +++ b/npm-debug.log @@ -0,0 +1,47 @@ +0 info it worked if it ends with ok +1 verbose cli [ '/Users/ikepon/.nvm/versions/node/v5.10.1/bin/node', +1 verbose cli '/Users/ikepon/.nvm/versions/node/v5.10.1/bin/npm', +1 verbose cli 'start' ] +2 info using npm@4.1.1 +3 info using node@v5.10.1 +4 verbose run-script [ 'prestart', 'start', 'poststart' ] +5 info lifecycle angular-quickstart@1.0.0~prestart: angular-quickstart@1.0.0 +6 silly lifecycle angular-quickstart@1.0.0~prestart: no script for prestart, continuing +7 info lifecycle angular-quickstart@1.0.0~start: angular-quickstart@1.0.0 +8 verbose lifecycle angular-quickstart@1.0.0~start: unsafe-perm in lifecycle true +9 verbose lifecycle angular-quickstart@1.0.0~start: PATH: /Users/ikepon/.nvm/versions/node/v5.10.1/lib/node_modules/npm/bin/node-gyp-bin:/Users/ikepon/ikepon/00_DIG/angular-quickstart/node_modules/.bin:/Users/ikepon/.nvm/versions/node/v5.10.1/bin:/usr/local/heroku/bin:/Users/ikepon/.rbenv/shims:/Users/ikepon/.rbenv/shims:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin +10 verbose lifecycle angular-quickstart@1.0.0~start: CWD: /Users/ikepon/ikepon/00_DIG/angular-quickstart +11 silly lifecycle angular-quickstart@1.0.0~start: Args: [ '-c', 'tsc && concurrently "tsc -w" "lite-server" ' ] +12 silly lifecycle angular-quickstart@1.0.0~start: Returned: code: 2 signal: null +13 info lifecycle angular-quickstart@1.0.0~start: Failed to exec start script +14 verbose stack Error: angular-quickstart@1.0.0 start: `tsc && concurrently "tsc -w" "lite-server" ` +14 verbose stack Exit status 2 +14 verbose stack at EventEmitter. (/Users/ikepon/.nvm/versions/node/v5.10.1/lib/node_modules/npm/lib/utils/lifecycle.js:279:16) +14 verbose stack at emitTwo (events.js:100:13) +14 verbose stack at EventEmitter.emit (events.js:185:7) +14 verbose stack at ChildProcess. (/Users/ikepon/.nvm/versions/node/v5.10.1/lib/node_modules/npm/lib/utils/spawn.js:40:14) +14 verbose stack at emitTwo (events.js:100:13) +14 verbose stack at ChildProcess.emit (events.js:185:7) +14 verbose stack at maybeClose (internal/child_process.js:850:16) +14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5) +15 verbose pkgid angular-quickstart@1.0.0 +16 verbose cwd /Users/ikepon/ikepon/00_DIG/angular-quickstart +17 error Darwin 15.6.0 +18 error argv "/Users/ikepon/.nvm/versions/node/v5.10.1/bin/node" "/Users/ikepon/.nvm/versions/node/v5.10.1/bin/npm" "start" +19 error node v5.10.1 +20 error npm v4.1.1 +21 error code ELIFECYCLE +22 error angular-quickstart@1.0.0 start: `tsc && concurrently "tsc -w" "lite-server" ` +22 error Exit status 2 +23 error Failed at the angular-quickstart@1.0.0 start script 'tsc && concurrently "tsc -w" "lite-server" '. +23 error Make sure you have the latest version of node.js and npm installed. +23 error If you do, this is most likely a problem with the angular-quickstart package, +23 error not with npm itself. +23 error Tell the author that this fails on your system: +23 error tsc && concurrently "tsc -w" "lite-server" +23 error You can get information on how to open an issue for this project with: +23 error npm bugs angular-quickstart +23 error Or if that isn't available, you can get their info via: +23 error npm owner ls angular-quickstart +23 error There is likely additional logging output above. +24 verbose exit [ 1, true ] From 6694c3f981d85358aeaa94d3f520ecd9bb6a36e6 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 15 Jan 2017 16:39:03 +0900 Subject: [PATCH 02/44] =?UTF-8?q?Hero=E3=81=AE=E6=83=85=E5=A0=B1=E3=82=92c?= =?UTF-8?q?lass=E3=82=92=E4=BD=BF=E3=81=A3=E3=81=A6=E5=AE=9A=E7=BE=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/app/app.component.ts b/app/app.component.ts index f7f1b84..2f2f1e5 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -1,9 +1,18 @@ import { Component } from '@angular/core'; + +export class Hero { + id: number; + name: string; +} + @Component({ selector: 'my-app', - template: '

{{title}}

{{hero}} details!

' + template: '

{{title}}

{{hero.name}} details!

' }) export class AppComponent { title = 'Tour of Heroes'; - hero = 'Windstorm'; + hero: Hero = { + id: 1, + name: 'Windstorm' + }; } From 0d3757d169001b92f02081ed533d4cc0f3f86698 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 15 Jan 2017 16:44:03 +0900 Subject: [PATCH 03/44] =?UTF-8?q?hero=E3=81=AE=E8=A9=B3=E7=B4=B0=E3=82=92?= =?UTF-8?q?=E8=A1=A8=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/app.component.ts b/app/app.component.ts index 2f2f1e5..c13abee 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -7,7 +7,7 @@ export class Hero { @Component({ selector: 'my-app', - template: '

{{title}}

{{hero.name}} details!

' + template: '

{{title}}

{{hero.name}} details!

{{hero.id}}
{{hero.name}}
' }) export class AppComponent { title = 'Tour of Heroes'; From 88d0d099f4837d417bdd963345d7c7756f1023a2 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 15 Jan 2017 16:47:27 +0900 Subject: [PATCH 04/44] =?UTF-8?q?template=E3=82=92=E8=AA=AD=E3=81=BF?= =?UTF-8?q?=E3=82=84=E3=81=99=E3=81=8F=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/app.component.ts b/app/app.component.ts index c13abee..5cbffc1 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -7,7 +7,12 @@ export class Hero { @Component({ selector: 'my-app', - template: '

{{title}}

{{hero.name}} details!

{{hero.id}}
{{hero.name}}
' + template: ` +

{{title}}

+

{{hero.name}} details!

+
{{hero.id}}
+
{{hero.name}}
+ ` }) export class AppComponent { title = 'Tour of Heroes'; From ace801b0342538dcb03751529c972a374518f5a4 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 15 Jan 2017 16:48:54 +0900 Subject: [PATCH 05/44] =?UTF-8?q?hero=20name=20=E3=82=92input=E3=82=BF?= =?UTF-8?q?=E3=82=B0=E3=81=AB=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/app.component.ts b/app/app.component.ts index 5cbffc1..9317b1d 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -11,7 +11,10 @@ export class Hero {

{{title}}

{{hero.name}} details!

{{hero.id}}
-
{{hero.name}}
+
+ + +
` }) export class AppComponent { From 2e00de3269089028990a75abca400eb9e4eaa377 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 15 Jan 2017 16:56:00 +0900 Subject: [PATCH 06/44] =?UTF-8?q?2way=20binding=20=E3=81=AE=E3=81=9F?= =?UTF-8?q?=E3=82=81=E3=81=ABforms=20module=20=E3=82=92=E8=AA=AD=E3=81=BF?= =?UTF-8?q?=E8=BE=BC=E3=82=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.module.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/app/app.module.ts b/app/app.module.ts index 5117901..8e349c2 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -1,11 +1,17 @@ import { NgModule } from '@angular/core'; // ブラウザで表示させるために必要 import { BrowserModule } from '@angular/platform-browser'; +// 2way binding のために必要 +import { FormsModule } from '@angular/forms'; // AppComponent を読みこんでる import { AppComponent } from './app.component'; + @NgModule({ - imports: [ BrowserModule ], + imports: [ + BrowserModule, + FormsModule + ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) From c91f4151adc4e9a63193ce1ce0dd610d872ab957 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 15 Jan 2017 17:13:12 +0900 Subject: [PATCH 07/44] =?UTF-8?q?2way=20binding=E3=82=92=E5=AE=9F=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/app.component.ts b/app/app.component.ts index 9317b1d..2e1b628 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -13,7 +13,8 @@ export class Hero {
{{hero.id}}
- +
+ TODO: remove this: {{hero.name}}
` }) From 98f391339d8e1a57de05096c9d7d568e0c83c3ae Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 15 Jan 2017 21:16:57 +0900 Subject: [PATCH 08/44] =?UTF-8?q?Hero=E4=B8=80=E8=A6=A7=E3=81=AE=E3=83=87?= =?UTF-8?q?=E3=83=BC=E3=82=BF=E3=82=92=E5=AE=9A=E7=BE=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/app/app.component.ts b/app/app.component.ts index 2e1b628..2d0992d 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -5,6 +5,19 @@ export class Hero { name: string; } +const HEROES: Hero[] = [ + { id: 11, name: 'Mr. Nice' }, + { id: 12, name: 'Narco' }, + { id: 13, name: 'Bombasto' }, + { id: 14, name: 'Celeritas' }, + { id: 15, name: 'Magneta' }, + { id: 16, name: 'RubberMan' }, + { id: 17, name: 'Dynama' }, + { id: 18, name: 'Dr IQ' }, + { id: 19, name: 'Magma' }, + { id: 20, name: 'Tornado' } +]; + @Component({ selector: 'my-app', template: ` @@ -24,4 +37,6 @@ export class AppComponent { id: 1, name: 'Windstorm' }; + + heroes = HEROES; } From a081ecd8529628cceb0ed7491204886be4e22a60 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 15 Jan 2017 21:17:16 +0900 Subject: [PATCH 09/44] =?UTF-8?q?Hero=E4=B8=80=E8=A6=A7=E3=82=92=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/app.component.ts b/app/app.component.ts index 2d0992d..5a91469 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -29,6 +29,12 @@ const HEROES: Hero[] = [
TODO: remove this: {{hero.name}} +

My Heroes

+
    +
  • + {{hero.id}} {{hero.name}} +
    • +
` }) export class AppComponent { From 0eb21a5b8c654cedfefcab5af9120f7ccfe52dfb Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 15 Jan 2017 21:30:57 +0900 Subject: [PATCH 10/44] =?UTF-8?q?Hero=E3=83=AA=E3=82=B9=E3=83=88=E3=81=AB?= =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 51 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 50 insertions(+), 1 deletion(-) diff --git a/app/app.component.ts b/app/app.component.ts index 5a91469..06f3db5 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -35,7 +35,56 @@ const HEROES: Hero[] = [ {{hero.id}} {{hero.name}} - ` + `, + styles: [` + .selected { + background-color: #CFD8DC !important; + color: white; + } + .heroes { + margin: 0 0 2em 0; + list-style-type: none; + padding: 0; + width: 15em; + } + .heroes li { + cursor: pointer; + position: relative; + left: 0; + background-color: #EEE; + margin: .5em; + padding: .3em 0; + height: 1.6em; + border-radius: 4px; + } + .heroes li.selected:hover { + background-color: #BBD8DC !important; + color: white; + } + .heroes li:hover { + color: #607D8B; + background-color: #DDD; + left: .1em; + } + .heroes .text { + position: relative; + top: -3px; + } + .heroes .badge { + display: inline-block; + font-size: small; + color: white; + padding: 0.8em 0.7em 0 0.7em; + background-color: #607D8B; + line-height: 1em; + position: relative; + left: -1px; + top: -4px; + height: 1.8em; + margin-right: .8em; + border-radius: 4px 0 0 4px; + } + `] }) export class AppComponent { title = 'Tour of Heroes'; From 332ec2a785e7f68276908e0b6f3dcfb94540a140 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 15 Jan 2017 21:51:23 +0900 Subject: [PATCH 11/44] =?UTF-8?q?Click=E3=82=A4=E3=83=99=E3=83=B3=E3=83=88?= =?UTF-8?q?=E3=82=92=E3=83=86=E3=83=B3=E3=83=97=E3=83=AC=E3=83=BC=E3=83=88?= =?UTF-8?q?=E3=81=AB=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/app.component.ts b/app/app.component.ts index 06f3db5..0982d6b 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -31,7 +31,7 @@ const HEROES: Hero[] = [

My Heroes

    -
  • +
  • {{hero.id}} {{hero.name}}
From cfc5935c870dcc499f68ff3be85dc67839279dae Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 15 Jan 2017 22:07:47 +0900 Subject: [PATCH 12/44] =?UTF-8?q?Hero=E3=82=92=E9=81=B8=E6=8A=9E=E3=81=99?= =?UTF-8?q?=E3=82=8B=E3=81=A8=E3=81=9D=E3=81=AE=E8=A9=B3=E7=B4=B0=E3=81=8C?= =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=95=E3=82=8C=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/app/app.component.ts b/app/app.component.ts index 0982d6b..7913476 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -22,12 +22,13 @@ const HEROES: Hero[] = [ selector: 'my-app', template: `

{{title}}

-

{{hero.name}} details!

-
{{hero.id}}
-
- -
- TODO: remove this: {{hero.name}} +
+

{{selectedHero.name}} details!

+
{{selectedHero.id}}
+
+ +
+

My Heroes

    @@ -94,4 +95,10 @@ export class AppComponent { }; heroes = HEROES; + + selectedHero: Hero; + + onSelect(hero: Hero): void { + this.selectedHero = hero; + }; } From 6071bf06b75655ed7a18a3098c47d63743f1eba6 Mon Sep 17 00:00:00 2001 From: ikepon Date: Mon, 16 Jan 2017 08:19:16 +0900 Subject: [PATCH 13/44] =?UTF-8?q?=E9=81=B8=E6=8A=9E=E3=81=95=E3=82=8C?= =?UTF-8?q?=E3=81=9F=E3=83=92=E3=83=BC=E3=83=AD=E3=83=BC=E3=81=AE=E3=82=B9?= =?UTF-8?q?=E3=82=BF=E3=82=A4=E3=83=AB=E3=82=92=E5=A4=89=E3=81=88=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/app/app.component.ts b/app/app.component.ts index 7913476..3df343f 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -22,6 +22,12 @@ const HEROES: Hero[] = [ selector: 'my-app', template: `

    {{title}}

    +

    My Heroes

    +
      +
    • + {{hero.id}} {{hero.name}} +
      • +

    {{selectedHero.name}} details!

    {{selectedHero.id}}
    @@ -30,12 +36,6 @@ const HEROES: Hero[] = [
-

My Heroes

-
    -
  • - {{hero.id}} {{hero.name}} -
    • -
`, styles: [` .selected { @@ -89,13 +89,7 @@ const HEROES: Hero[] = [ }) export class AppComponent { title = 'Tour of Heroes'; - hero: Hero = { - id: 1, - name: 'Windstorm' - }; - heroes = HEROES; - selectedHero: Hero; onSelect(hero: Hero): void { From ad2a0c068eb2ef55fc41128ab3e37d43e6dd531f Mon Sep 17 00:00:00 2001 From: ikepon Date: Mon, 16 Jan 2017 08:38:12 +0900 Subject: [PATCH 14/44] =?UTF-8?q?=E3=83=92=E3=83=BC=E3=83=AD=E3=83=BC?= =?UTF-8?q?=E8=A9=B3=E7=B4=B0=E3=81=AE=E3=83=86=E3=83=B3=E3=83=97=E3=83=AC?= =?UTF-8?q?=E3=83=BC=E3=83=88=E3=82=92=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/hero-detail.component.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 app/hero-detail.component.ts diff --git a/app/hero-detail.component.ts b/app/hero-detail.component.ts new file mode 100644 index 0000000..9a56068 --- /dev/null +++ b/app/hero-detail.component.ts @@ -0,0 +1,19 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'my-hero-detail', + template: ` +
+

{{hero.name}} details!

+
{{hero.id}}
+
+ + +
+
+ ` +}) + +export class HeroDetailComponent { + hero: Hero; +} From 94fc326afd6ff68b1859655f4d3bc661ec41d211 Mon Sep 17 00:00:00 2001 From: ikepon Date: Mon, 16 Jan 2017 08:39:59 +0900 Subject: [PATCH 15/44] =?UTF-8?q?Hero=E3=82=AF=E3=83=A9=E3=82=B9=E3=81=AE?= =?UTF-8?q?=E5=88=87=E3=82=8A=E5=87=BA=E3=81=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 6 +----- app/hero-detail.component.ts | 1 + app/hero.ts | 4 ++++ 3 files changed, 6 insertions(+), 5 deletions(-) create mode 100644 app/hero.ts diff --git a/app/app.component.ts b/app/app.component.ts index 3df343f..d3cfd8e 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -1,9 +1,5 @@ import { Component } from '@angular/core'; - -export class Hero { - id: number; - name: string; -} +import { Hero } from './hero'; const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' }, diff --git a/app/hero-detail.component.ts b/app/hero-detail.component.ts index 9a56068..15d1392 100644 --- a/app/hero-detail.component.ts +++ b/app/hero-detail.component.ts @@ -1,4 +1,5 @@ import { Component, Input } from '@angular/core'; +import { Hero } from './hero'; @Component({ selector: 'my-hero-detail', diff --git a/app/hero.ts b/app/hero.ts new file mode 100644 index 0000000..e3eac51 --- /dev/null +++ b/app/hero.ts @@ -0,0 +1,4 @@ +export class Hero { + id: number; + name: string; +} From 4dc3edafab6d0c6f37d36425259d355d311439f8 Mon Sep 17 00:00:00 2001 From: ikepon Date: Mon, 16 Jan 2017 08:53:52 +0900 Subject: [PATCH 16/44] =?UTF-8?q?Hero=E8=A9=B3=E7=B4=B0=E3=82=92=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= =?UTF-8?q?hero=20=E3=81=A8=20selectedHero=E3=82=92bind?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 9 +-------- app/app.module.ts | 7 ++++++- app/hero-detail.component.ts | 1 + 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/app/app.component.ts b/app/app.component.ts index d3cfd8e..4560c6a 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -24,14 +24,7 @@ const HEROES: Hero[] = [ {{hero.id}} {{hero.name}} -
-

{{selectedHero.name}} details!

-
{{selectedHero.id}}
-
- -
-
-
+ `, styles: [` .selected { diff --git a/app/app.module.ts b/app/app.module.ts index 8e349c2..a78ac2b 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -6,13 +6,18 @@ import { FormsModule } from '@angular/forms'; // AppComponent を読みこんでる import { AppComponent } from './app.component'; +// HeroDetailComponent を読み込んでる +import { HeroDetailComponent } from './hero-detail.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], - declarations: [ AppComponent ], + declarations: [ + AppComponent, + HeroDetailComponent + ], bootstrap: [ AppComponent ] }) export class AppModule { } diff --git a/app/hero-detail.component.ts b/app/hero-detail.component.ts index 15d1392..ada70c7 100644 --- a/app/hero-detail.component.ts +++ b/app/hero-detail.component.ts @@ -16,5 +16,6 @@ import { Hero } from './hero'; }) export class HeroDetailComponent { + @Input() hero: Hero; } From 7e4f2d3cf63a2f22e59b7779348ef06565f8a8cc Mon Sep 17 00:00:00 2001 From: ikepon Date: Mon, 16 Jan 2017 09:06:46 +0900 Subject: [PATCH 17/44] =?UTF-8?q?HeroService=E3=81=AE=E3=83=99=E3=83=BC?= =?UTF-8?q?=E3=82=B9=E3=82=92=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/hero.service.ts | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 app/hero.service.ts diff --git a/app/hero.service.ts b/app/hero.service.ts new file mode 100644 index 0000000..afb36e9 --- /dev/null +++ b/app/hero.service.ts @@ -0,0 +1,6 @@ +import { Injectable } from '@angular/core'; + +@Inject() +export class HeroService { + getHeroes(): void {} +} From 6e8a278953af7a9d500c9729b2a183c76e64f149 Mon Sep 17 00:00:00 2001 From: ikepon Date: Tue, 17 Jan 2017 08:43:11 +0900 Subject: [PATCH 18/44] =?UTF-8?q?HERO=E3=81=AE=E3=83=87=E3=83=BC=E3=82=BF?= =?UTF-8?q?=E3=83=A2=E3=83=83=E3=82=AF=E3=82=92=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/mock-heroes.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 app/mock-heroes.ts diff --git a/app/mock-heroes.ts b/app/mock-heroes.ts new file mode 100644 index 0000000..80dfe9e --- /dev/null +++ b/app/mock-heroes.ts @@ -0,0 +1,14 @@ +import { Hero } from './hero'; + +export const HEROES: Hero[] = [ + {id: 11, name: 'Mr. Nice'}, + {id: 12, name: 'Narco'}, + {id: 13, name: 'Bombasto'}, + {id: 14, name: 'Celeritas'}, + {id: 15, name: 'Magneta'}, + {id: 16, name: 'RubberMan'}, + {id: 17, name: 'Dynama'}, + {id: 18, name: 'Dr IQ'}, + {id: 19, name: 'Magma'}, + {id: 20, name: 'Tornado'} +]; From 9ae5642f84a234c3d8e5377d60fc43c1f311bb8a Mon Sep 17 00:00:00 2001 From: ikepon Date: Tue, 17 Jan 2017 08:46:11 +0900 Subject: [PATCH 19/44] =?UTF-8?q?Heros=20=E3=82=92=E8=AA=AD=E3=81=BF?= =?UTF-8?q?=E8=BE=BC=E3=81=BF=E3=80=81heroes=E3=83=91=E3=83=A9=E3=83=A1?= =?UTF-8?q?=E3=83=BC=E3=82=BF=E3=81=ABHero=E3=82=AF=E3=83=A9=E3=82=B9?= =?UTF-8?q?=E3=81=AE=E9=85=8D=E5=88=97=E3=82=92=E5=85=A5=E3=82=8C=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/app/app.component.ts b/app/app.component.ts index 4560c6a..a21aa88 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -1,19 +1,6 @@ import { Component } from '@angular/core'; import { Hero } from './hero'; -const HEROES: Hero[] = [ - { id: 11, name: 'Mr. Nice' }, - { id: 12, name: 'Narco' }, - { id: 13, name: 'Bombasto' }, - { id: 14, name: 'Celeritas' }, - { id: 15, name: 'Magneta' }, - { id: 16, name: 'RubberMan' }, - { id: 17, name: 'Dynama' }, - { id: 18, name: 'Dr IQ' }, - { id: 19, name: 'Magma' }, - { id: 20, name: 'Tornado' } -]; - @Component({ selector: 'my-app', template: ` @@ -78,7 +65,7 @@ const HEROES: Hero[] = [ }) export class AppComponent { title = 'Tour of Heroes'; - heroes = HEROES; + heroes: Hero[]; selectedHero: Hero; onSelect(hero: Hero): void { From 6d6eabc406e7c567b3670261c2a9b3208579bcc4 Mon Sep 17 00:00:00 2001 From: ikepon Date: Tue, 17 Jan 2017 08:52:18 +0900 Subject: [PATCH 20/44] =?UTF-8?q?HeroService=E3=81=A7Hero=20mock=20?= =?UTF-8?q?=E3=82=92=E8=BF=94=E3=81=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/hero.service.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/app/hero.service.ts b/app/hero.service.ts index afb36e9..19463ef 100644 --- a/app/hero.service.ts +++ b/app/hero.service.ts @@ -1,6 +1,13 @@ import { Injectable } from '@angular/core'; -@Inject() +import { Hero } from './hero'; +// heroes のモックを読み込む +import { HEROES } from './mock-heroes'; + + +@Injectable() export class HeroService { - getHeroes(): void {} + getHeroes(): Hero[] { + return HEROES; + } } From 05287c06758cd5cc95968169b02d37b47537274a Mon Sep 17 00:00:00 2001 From: ikepon Date: Tue, 17 Jan 2017 09:04:39 +0900 Subject: [PATCH 21/44] =?UTF-8?q?Heroes=E3=82=92app.component=E3=81=8B?= =?UTF-8?q?=E3=82=89=E5=91=BC=E3=81=B3=E5=87=BA=E3=81=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/app/app.component.ts b/app/app.component.ts index a21aa88..ac6bdd7 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { Hero } from './hero'; +import { HeroService } from './hero.service'; @Component({ selector: 'my-app', @@ -61,13 +62,18 @@ import { Hero } from './hero'; margin-right: .8em; border-radius: 4px 0 0 4px; } - `] + `], + providers: [HeroService] }) + + export class AppComponent { title = 'Tour of Heroes'; - heroes: Hero[]; + this.heroes = this.heroService.getHeroes(); selectedHero: Hero; + constructor(private heroService: HeroService) { } + onSelect(hero: Hero): void { this.selectedHero = hero; }; From 7e2538ea8a35f079f04c0e3ba358c1f1fd71e12e Mon Sep 17 00:00:00 2001 From: ikepon Date: Tue, 17 Jan 2017 09:24:36 +0900 Subject: [PATCH 22/44] =?UTF-8?q?ngOnInit=20=E3=81=8B=E3=82=89=20getHeroes?= =?UTF-8?q?=E3=82=92=E5=91=BC=E3=81=B3=E5=87=BA=E3=81=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app/app.component.ts b/app/app.component.ts index ac6bdd7..f8a8ba7 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { Hero } from './hero'; import { HeroService } from './hero.service'; @@ -67,14 +67,18 @@ import { HeroService } from './hero.service'; }) -export class AppComponent { +export class AppComponent implements OnInit { title = 'Tour of Heroes'; this.heroes = this.heroService.getHeroes(); selectedHero: Hero; constructor(private heroService: HeroService) { } + ngOnInit(): void { + this.getHeroes(); + } + onSelect(hero: Hero): void { this.selectedHero = hero; - }; + } } From d0b219133fd7c3fb6cbc802fffeecd8cdd8f1709 Mon Sep 17 00:00:00 2001 From: ikepon Date: Tue, 17 Jan 2017 09:25:50 +0900 Subject: [PATCH 23/44] =?UTF-8?q?app.component=E3=81=8B=E3=82=89promise?= =?UTF-8?q?=E3=82=92=E4=BD=BF=E3=81=A3=E3=81=A6getHeroes=E3=82=92=E5=91=BC?= =?UTF-8?q?=E3=81=B3=E5=87=BA=E3=81=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 5 ++++- app/app.module.ts | 2 +- app/hero.service.ts | 4 ++-- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/app/app.component.ts b/app/app.component.ts index f8a8ba7..8d1c7e3 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -69,7 +69,7 @@ import { HeroService } from './hero.service'; export class AppComponent implements OnInit { title = 'Tour of Heroes'; - this.heroes = this.heroService.getHeroes(); + heroes: Hero[]; selectedHero: Hero; constructor(private heroService: HeroService) { } @@ -81,4 +81,7 @@ export class AppComponent implements OnInit { onSelect(hero: Hero): void { this.selectedHero = hero; } + getHeroes(): void { + this.heroService.getHeroes().then(heroes => this.heroes = heroes); + } } diff --git a/app/app.module.ts b/app/app.module.ts index a78ac2b..ead167a 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -5,7 +5,7 @@ import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; // AppComponent を読みこんでる -import { AppComponent } from './app.component'; +import { AppComponent } from './app.component'; // HeroDetailComponent を読み込んでる import { HeroDetailComponent } from './hero-detail.component'; diff --git a/app/hero.service.ts b/app/hero.service.ts index 19463ef..becc736 100644 --- a/app/hero.service.ts +++ b/app/hero.service.ts @@ -7,7 +7,7 @@ import { HEROES } from './mock-heroes'; @Injectable() export class HeroService { - getHeroes(): Hero[] { - return HEROES; + getHeroes(): Promise { + return Promise.resolve(HEROES); } } From fd0ba8d97aacbed87d6b1d6a72f8b5e35cb941cd Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 22 Jan 2017 13:05:31 +0900 Subject: [PATCH 24/44] =?UTF-8?q?app.component=20=E3=82=92=20heroes.compon?= =?UTF-8?q?ent=E3=81=ABrename?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/{app.component.ts => heroes.component.ts} | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename app/{app.component.ts => heroes.component.ts} (96%) diff --git a/app/app.component.ts b/app/heroes.component.ts similarity index 96% rename from app/app.component.ts rename to app/heroes.component.ts index 8d1c7e3..f195f4e 100644 --- a/app/app.component.ts +++ b/app/heroes.component.ts @@ -3,7 +3,7 @@ import { Hero } from './hero'; import { HeroService } from './hero.service'; @Component({ - selector: 'my-app', + selector: 'my-heroes', template: `

{{title}}

My Heroes

@@ -67,7 +67,7 @@ import { HeroService } from './hero.service'; }) -export class AppComponent implements OnInit { +export class HeroesComponent implements OnInit { title = 'Tour of Heroes'; heroes: Hero[]; selectedHero: Hero; From 5e742ec17f9fc584c12195429af0bcd4062a3e76 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 22 Jan 2017 13:33:30 +0900 Subject: [PATCH 25/44] =?UTF-8?q?=E6=96=B0=E3=81=97=E3=81=8Fapp.component?= =?UTF-8?q?=E3=82=92=E4=BD=9C=E3=82=8A=E3=80=81heroes.component,=20HeroSer?= =?UTF-8?q?vice=E3=81=AA=E3=81=A9=E3=82=92=E8=A8=AD=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 13 +++++++++++++ app/app.module.ts | 8 ++++++++ app/heroes.component.ts | 5 +---- 3 files changed, 22 insertions(+), 4 deletions(-) create mode 100644 app/app.component.ts diff --git a/app/app.component.ts b/app/app.component.ts new file mode 100644 index 0000000..57abc4c --- /dev/null +++ b/app/app.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + template:` +

{{title}}

+ + ` +}) + +export class AppComponent { + title = 'Tour of Heroes'; +} diff --git a/app/app.module.ts b/app/app.module.ts index ead167a..3159c11 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -6,8 +6,12 @@ import { FormsModule } from '@angular/forms'; // AppComponent を読みこんでる import { AppComponent } from './app.component'; +// HeroesComponent を読み込んでる +import { HeroesComponent } from './heroes.component'; // HeroDetailComponent を読み込んでる import { HeroDetailComponent } from './hero-detail.component'; +// HeroService を読み込んでる +import { HeroService } from './hero.service'; @NgModule({ imports: [ @@ -16,8 +20,12 @@ import { HeroDetailComponent } from './hero-detail.component'; ], declarations: [ AppComponent, + HeroesComponent, HeroDetailComponent ], + providers: [ + HeroService + ], bootstrap: [ AppComponent ] }) export class AppModule { } diff --git a/app/heroes.component.ts b/app/heroes.component.ts index f195f4e..201e965 100644 --- a/app/heroes.component.ts +++ b/app/heroes.component.ts @@ -5,7 +5,6 @@ import { HeroService } from './hero.service'; @Component({ selector: 'my-heroes', template: ` -

{{title}}

My Heroes

  • @@ -62,13 +61,11 @@ import { HeroService } from './hero.service'; margin-right: .8em; border-radius: 4px 0 0 4px; } - `], - providers: [HeroService] + `] }) export class HeroesComponent implements OnInit { - title = 'Tour of Heroes'; heroes: Hero[]; selectedHero: Hero; From e7c8346f6689b3701c2382d0df295fc3f7740871 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 22 Jan 2017 14:00:11 +0900 Subject: [PATCH 26/44] =?UTF-8?q?/heroes=E3=81=B8=E3=81=AEroute=E3=82=92?= =?UTF-8?q?=E8=A8=AD=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 3 ++- app/app.module.ts | 14 +++++++++++--- index.html | 1 + 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/app/app.component.ts b/app/app.component.ts index 57abc4c..f482a1a 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -4,7 +4,8 @@ import { Component } from '@angular/core'; selector: 'my-app', template:`

    {{title}}

    - + Heroes + ` }) diff --git a/app/app.module.ts b/app/app.module.ts index 3159c11..6dd8fbe 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -3,6 +3,7 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; // 2way binding のために必要 import { FormsModule } from '@angular/forms'; +import { RouterModule } from '@angular/router'; // AppComponent を読みこんでる import { AppComponent } from './app.component'; @@ -14,9 +15,15 @@ import { HeroDetailComponent } from './hero-detail.component'; import { HeroService } from './hero.service'; @NgModule({ - imports: [ + imports: [ BrowserModule, - FormsModule + FormsModule, + RouterModule.forRoot([ + { + path: 'heroes', + component: HeroesComponent + } + ]) ], declarations: [ AppComponent, @@ -26,6 +33,7 @@ import { HeroService } from './hero.service'; providers: [ HeroService ], - bootstrap: [ AppComponent ] + bootstrap: [ AppComponent ] }) + export class AppModule { } diff --git a/index.html b/index.html index 4c01792..616804a 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + Angular QuickStart From 660ab616a7134f3acb964a72b0fbf83baf80bc17 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 22 Jan 2017 14:09:13 +0900 Subject: [PATCH 27/44] =?UTF-8?q?DashboardComponent=E3=82=92=E5=AE=9A?= =?UTF-8?q?=E7=BE=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.module.ts | 10 ++++++---- app/dashboard.component.ts | 10 ++++++++++ 2 files changed, 16 insertions(+), 4 deletions(-) create mode 100644 app/dashboard.component.ts diff --git a/app/app.module.ts b/app/app.module.ts index 6dd8fbe..5219269 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -5,13 +5,10 @@ import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; -// AppComponent を読みこんでる import { AppComponent } from './app.component'; -// HeroesComponent を読み込んでる +import { DashboardComponent } from './dashboard.component'; import { HeroesComponent } from './heroes.component'; -// HeroDetailComponent を読み込んでる import { HeroDetailComponent } from './hero-detail.component'; -// HeroService を読み込んでる import { HeroService } from './hero.service'; @NgModule({ @@ -19,6 +16,10 @@ import { HeroService } from './hero.service'; BrowserModule, FormsModule, RouterModule.forRoot([ + { + path: 'dashboard', + component: DashboardComponent + }, { path: 'heroes', component: HeroesComponent @@ -27,6 +28,7 @@ import { HeroService } from './hero.service'; ], declarations: [ AppComponent, + DashboardComponent, HeroesComponent, HeroDetailComponent ], diff --git a/app/dashboard.component.ts b/app/dashboard.component.ts new file mode 100644 index 0000000..9dc0fa8 --- /dev/null +++ b/app/dashboard.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-dashboard', + template: ` +

    My Dashboard

    + ` +}) + +export class DashboardComponent {} From 619af3c01b373b2c1856c2914c4d910d3078dd30 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 22 Jan 2017 14:09:47 +0900 Subject: [PATCH 28/44] =?UTF-8?q?/=E3=81=B8=E3=81=AE=E3=82=A2=E3=82=AF?= =?UTF-8?q?=E3=82=BB=E3=82=B9=E3=81=AFdashboard=E3=81=AB=E3=83=AA=E3=83=80?= =?UTF-8?q?=E3=82=A4=E3=83=AC=E3=82=AF=E3=83=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.module.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/app.module.ts b/app/app.module.ts index 5219269..f7b8cae 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -16,6 +16,11 @@ import { HeroService } from './hero.service'; BrowserModule, FormsModule, RouterModule.forRoot([ + { + path: '', + redirectTo: '/dashboard', + pathMatch: 'full' + }, { path: 'dashboard', component: DashboardComponent From e35a80e5612dcc327972001b34eded8782de2f98 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 22 Jan 2017 14:11:16 +0900 Subject: [PATCH 29/44] =?UTF-8?q?Dashboard=E3=81=B8=E3=81=AE=E3=83=AA?= =?UTF-8?q?=E3=83=B3=E3=82=AF=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/app.component.ts b/app/app.component.ts index f482a1a..93cec3a 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -4,7 +4,10 @@ import { Component } from '@angular/core'; selector: 'my-app', template:`

    {{title}}

    - Heroes + ` }) From c3a1dc95c43494e1e80f9819aa8b566b85e28c17 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 22 Jan 2017 14:21:05 +0900 Subject: [PATCH 30/44] =?UTF-8?q?Dashboard=20=E3=81=ABtop=20heroes?= =?UTF-8?q?=E3=82=92=E8=A1=A8=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/dashboard.component.html | 8 ++++++++ app/dashboard.component.ts | 21 ++++++++++++++++----- 2 files changed, 24 insertions(+), 5 deletions(-) create mode 100644 app/dashboard.component.html diff --git a/app/dashboard.component.html b/app/dashboard.component.html new file mode 100644 index 0000000..fdcd583 --- /dev/null +++ b/app/dashboard.component.html @@ -0,0 +1,8 @@ +

    Top Heroes

    +
    +
    +
    +

    {{hero.name}}

    +
    +
    +
    diff --git a/app/dashboard.component.ts b/app/dashboard.component.ts index 9dc0fa8..0940d09 100644 --- a/app/dashboard.component.ts +++ b/app/dashboard.component.ts @@ -1,10 +1,21 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; + +import { Hero } from './hero'; +import { HeroService } from './hero.service'; @Component({ + moduleId: module.id, selector: 'my-dashboard', - template: ` -

    My Dashboard

    - ` + templateUrl: 'dashboard.component.html' }) -export class DashboardComponent {} +export class DashboardComponent { + heroes: Hero[] = []; + + constructor(private heroService: HeroService) {} + + ngOnInit(): void { + this.heroService.getHeroes() + .then(heroes => this.heroes = heroes.slice(1, 5)); + } +} From fc0a811fdb0fe587614479ac036974d1c026a778 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 22 Jan 2017 15:02:43 +0900 Subject: [PATCH 31/44] =?UTF-8?q?Hero=E8=A9=B3=E7=B4=B0=E3=81=B8=E3=81=AEr?= =?UTF-8?q?oute=E3=82=92=E5=AE=9A=E7=BE=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.module.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/app.module.ts b/app/app.module.ts index f7b8cae..14c45e7 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -28,6 +28,10 @@ import { HeroService } from './hero.service'; { path: 'heroes', component: HeroesComponent + }, + { + path: 'detail/:id', + component: HeroDetailComponent } ]) ], From 81725a37a4864e6f2fcb330695e4ef69e09bf499 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 22 Jan 2017 16:08:39 +0900 Subject: [PATCH 32/44] =?UTF-8?q?Hero=E8=A9=B3=E7=B4=B0=E3=83=9A=E3=83=BC?= =?UTF-8?q?=E3=82=B8=E3=81=B8=E3=81=AE=E3=83=AA=E3=83=B3=E3=82=AF=E3=81=A8?= =?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B8=E8=A9=B3=E7=B4=B0=E3=82=92=E8=AA=BF?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/dashboard.component.html | 10 ++++----- app/hero-detail.component.html | 10 +++++++++ app/hero-detail.component.ts | 38 +++++++++++++++++++++++----------- app/hero.service.ts | 4 ++++ 4 files changed, 45 insertions(+), 17 deletions(-) create mode 100644 app/hero-detail.component.html diff --git a/app/dashboard.component.html b/app/dashboard.component.html index fdcd583..2a471cc 100644 --- a/app/dashboard.component.html +++ b/app/dashboard.component.html @@ -1,8 +1,8 @@

    Top Heroes

    -
    -
    -

    {{hero.name}}

    -
    -
    + +
    +

    {{hero.name}}

    +
    +
    diff --git a/app/hero-detail.component.html b/app/hero-detail.component.html new file mode 100644 index 0000000..deb47fb --- /dev/null +++ b/app/hero-detail.component.html @@ -0,0 +1,10 @@ +
    +

    {{hero.name}} details!

    +
    + {{hero.id}}
    +
    + + +
    + +
    diff --git a/app/hero-detail.component.ts b/app/hero-detail.component.ts index ada70c7..7e4bcc1 100644 --- a/app/hero-detail.component.ts +++ b/app/hero-detail.component.ts @@ -1,21 +1,35 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; +import { ActivatedRoute, Params } from '@angular/router'; +import { Location } from '@angular/common'; + +import 'rxjs/add/operator/switchMap'; + import { Hero } from './hero'; +import { HeroService } from './hero.service'; @Component({ + moduleId: module.id, selector: 'my-hero-detail', - template: ` -
    -

    {{hero.name}} details!

    -
    {{hero.id}}
    -
    - - -
    -
    - ` + templateUrl: 'hero-detail.component.html', }) -export class HeroDetailComponent { +export class HeroDetailComponent implements OnInit { @Input() hero: Hero; + + ngOnInit(): void { + this.route.params + .switchMap((params: Params) => this.heroService.getHero(+params['id'])) + .subscribe(hero => this.hero = hero); + } + + constructor( + private heroService: HeroService, + private route: ActivatedRoute, + private location: Location + ) {} + + goBack(): void { + this.location.back(); + } } diff --git a/app/hero.service.ts b/app/hero.service.ts index becc736..3840840 100644 --- a/app/hero.service.ts +++ b/app/hero.service.ts @@ -10,4 +10,8 @@ export class HeroService { getHeroes(): Promise { return Promise.resolve(HEROES); } + getHero(id: number): Promise { + return this.getHeroes() + .then(heroes => heroes.find(hero => hero.id === id)); + } } From 1f49f40a506902357595b13c517b6a21fc258e22 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 22 Jan 2017 16:29:15 +0900 Subject: [PATCH 33/44] =?UTF-8?q?Routing=E3=82=92=E5=88=A5=E3=83=95?= =?UTF-8?q?=E3=82=A1=E3=82=A4=E3=83=AB=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app-routing.module.ts | 20 ++++++++++++++++++++ app/app.module.ts | 25 +++---------------------- 2 files changed, 23 insertions(+), 22 deletions(-) create mode 100644 app/app-routing.module.ts diff --git a/app/app-routing.module.ts b/app/app-routing.module.ts new file mode 100644 index 0000000..73f447f --- /dev/null +++ b/app/app-routing.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +import { DashboardComponent } from './dashboard.component'; +import { HeroesComponent } from './heroes.component'; +import { HeroDetailComponent } from './hero-detail.component'; + +const routes: Routes = [ + { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, + { path: 'dashboard', component: DashboardComponent }, + { path: 'detail/:id', component: HeroDetailComponent }, + { path: 'heroes', component: HeroesComponent } +]; + +@NgModule({ + imports: [ RouterModule.forRoot(routes) ], + exports: [ RouterModule ] +}) + +export class AppRoutingModule {} diff --git a/app/app.module.ts b/app/app.module.ts index 14c45e7..f9341e0 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -1,9 +1,6 @@ import { NgModule } from '@angular/core'; -// ブラウザで表示させるために必要 import { BrowserModule } from '@angular/platform-browser'; -// 2way binding のために必要 import { FormsModule } from '@angular/forms'; -import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; import { DashboardComponent } from './dashboard.component'; @@ -11,29 +8,13 @@ import { HeroesComponent } from './heroes.component'; import { HeroDetailComponent } from './hero-detail.component'; import { HeroService } from './hero.service'; +import { AppRoutingModule } from './app-routing.module'; + @NgModule({ imports: [ BrowserModule, FormsModule, - RouterModule.forRoot([ - { - path: '', - redirectTo: '/dashboard', - pathMatch: 'full' - }, - { - path: 'dashboard', - component: DashboardComponent - }, - { - path: 'heroes', - component: HeroesComponent - }, - { - path: 'detail/:id', - component: HeroDetailComponent - } - ]) + AppRoutingModule ], declarations: [ AppComponent, From 45ceedba0cede0cd482567160ca5a5ed3b948e31 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 22 Jan 2017 16:37:12 +0900 Subject: [PATCH 34/44] =?UTF-8?q?=E7=B0=A1=E5=8D=98=E3=81=AAHero=E6=83=85?= =?UTF-8?q?=E5=A0=B1=E3=82=B3=E3=83=B3=E3=83=86=E3=83=B3=E3=83=84=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/heroes.component.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/heroes.component.ts b/app/heroes.component.ts index 201e965..5ab18ec 100644 --- a/app/heroes.component.ts +++ b/app/heroes.component.ts @@ -11,7 +11,12 @@ import { HeroService } from './hero.service'; {{hero.id}} {{hero.name}}
- +
+

+ {{selectedHero.name | uppercase}} is my hero +

+ +
`, styles: [` .selected { From 863732d34364aae14f8eb30a9531a988ee92db68 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 22 Jan 2017 16:42:55 +0900 Subject: [PATCH 35/44] =?UTF-8?q?heroes.component=E3=81=AEhtml=E3=81=A8css?= =?UTF-8?q?=E3=82=92=E5=88=A5=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/heroes.component.css | 47 ++++++++++++++++++++++++++++ app/heroes.component.html | 12 +++++++ app/heroes.component.ts | 66 ++------------------------------------- 3 files changed, 62 insertions(+), 63 deletions(-) create mode 100644 app/heroes.component.css create mode 100644 app/heroes.component.html diff --git a/app/heroes.component.css b/app/heroes.component.css new file mode 100644 index 0000000..c97fa65 --- /dev/null +++ b/app/heroes.component.css @@ -0,0 +1,47 @@ +.selected { + background-color: #CFD8DC !important; + color: white; +} +.heroes { + margin: 0 0 2em 0; + list-style-type: none; + padding: 0; + width: 15em; +} +.heroes li { + cursor: pointer; + position: relative; + left: 0; + background-color: #EEE; + margin: .5em; + padding: .3em 0; + height: 1.6em; + border-radius: 4px; +} +.heroes li.selected:hover { + background-color: #BBD8DC !important; + color: white; +} +.heroes li:hover { + color: #607D8B; + background-color: #DDD; + left: .1em; +} +.heroes .text { + position: relative; + top: -3px; +} +.heroes .badge { + display: inline-block; + font-size: small; + color: white; + padding: 0.8em 0.7em 0 0.7em; + background-color: #607D8B; + line-height: 1em; + position: relative; + left: -1px; + top: -4px; + height: 1.8em; + margin-right: .8em; + border-radius: 4px 0 0 4px; +} diff --git a/app/heroes.component.html b/app/heroes.component.html new file mode 100644 index 0000000..85d639f --- /dev/null +++ b/app/heroes.component.html @@ -0,0 +1,12 @@ +

My Heroes

+
    +
  • + {{hero.id}} {{hero.name}} +
    • +
+
+

+ {{selectedHero.name | uppercase}} is my hero +

+ +
diff --git a/app/heroes.component.ts b/app/heroes.component.ts index 5ab18ec..31f13ac 100644 --- a/app/heroes.component.ts +++ b/app/heroes.component.ts @@ -3,70 +3,10 @@ import { Hero } from './hero'; import { HeroService } from './hero.service'; @Component({ + moduleId: module.id, selector: 'my-heroes', - template: ` -

My Heroes

-
    -
  • - {{hero.id}} {{hero.name}} -
    • -
-
-

- {{selectedHero.name | uppercase}} is my hero -

- -
- `, - styles: [` - .selected { - background-color: #CFD8DC !important; - color: white; - } - .heroes { - margin: 0 0 2em 0; - list-style-type: none; - padding: 0; - width: 15em; - } - .heroes li { - cursor: pointer; - position: relative; - left: 0; - background-color: #EEE; - margin: .5em; - padding: .3em 0; - height: 1.6em; - border-radius: 4px; - } - .heroes li.selected:hover { - background-color: #BBD8DC !important; - color: white; - } - .heroes li:hover { - color: #607D8B; - background-color: #DDD; - left: .1em; - } - .heroes .text { - position: relative; - top: -3px; - } - .heroes .badge { - display: inline-block; - font-size: small; - color: white; - padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; - line-height: 1em; - position: relative; - left: -1px; - top: -4px; - height: 1.8em; - margin-right: .8em; - border-radius: 4px 0 0 4px; - } - `] + templateUrl: 'heroes.component.html', + styleUrls: [ 'heroes.component.css' ] }) From 39135e6e06f360d9eec29c4ea77f6a3c38097f1b Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 22 Jan 2017 18:12:30 +0900 Subject: [PATCH 36/44] =?UTF-8?q?Hero=E4=B8=80=E8=A6=A7=E3=81=AB=E8=A9=B3?= =?UTF-8?q?=E7=B4=B0=E3=81=B8=E3=81=AE=E3=83=AA=E3=83=B3=E3=82=AF=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/heroes.component.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/app/heroes.component.ts b/app/heroes.component.ts index 31f13ac..ea9ba1a 100644 --- a/app/heroes.component.ts +++ b/app/heroes.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; import { Hero } from './hero'; import { HeroService } from './hero.service'; @@ -14,7 +15,14 @@ export class HeroesComponent implements OnInit { heroes: Hero[]; selectedHero: Hero; - constructor(private heroService: HeroService) { } + constructor( + private router: Router, + private heroService: HeroService + ) { } + + getHeroes(): void { + this.heroService.getHeroes().then(heroes => this.heroes = heroes); + } ngOnInit(): void { this.getHeroes(); @@ -23,7 +31,8 @@ export class HeroesComponent implements OnInit { onSelect(hero: Hero): void { this.selectedHero = hero; } - getHeroes(): void { - this.heroService.getHeroes().then(heroes => this.heroes = heroes); + + gotoDetail(): void { + this.router.navigate(['/detail', this.selectedHero.id]); } } From a9a4b506be8421d580836076d7a78046f72787bd Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 22 Jan 2017 18:26:18 +0900 Subject: [PATCH 37/44] =?UTF-8?q?dashboard=E3=81=A8hero-detail=E3=81=AE?= =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E3=82=92=E8=AA=BF=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/dashboard.component.css | 61 +++++++++++++++++++++++++++++++++++ app/dashboard.component.ts | 3 +- app/hero-detail.component.css | 29 +++++++++++++++++ app/hero-detail.component.ts | 7 ++-- 4 files changed, 94 insertions(+), 6 deletions(-) create mode 100644 app/dashboard.component.css create mode 100644 app/hero-detail.component.css diff --git a/app/dashboard.component.css b/app/dashboard.component.css new file mode 100644 index 0000000..096cec7 --- /dev/null +++ b/app/dashboard.component.css @@ -0,0 +1,61 @@ +[class*='col-'] { + float: left; + padding-right: 20px; + padding-bottom: 20px; +} +[class*='col-']:last-of-type { + padding-right: 0; +} +a { + text-decoration: none; +} +*, *:after, *:before { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +h3 { + text-align: center; margin-bottom: 0; +} +h4 { + position: relative; +} +.grid { + margin: 0; +} +.col-1-4 { + width: 25%; +} +.module { + padding: 20px; + text-align: center; + color: #eee; + max-height: 120px; + min-width: 120px; + background-color: #607D8B; + border-radius: 2px; +} +.module:hover { + background-color: #EEE; + cursor: pointer; + color: #607d8b; +} +.grid-pad { + padding: 10px 0; +} +.grid-pad > [class*='col-']:last-of-type { + padding-right: 20px; +} +@media (max-width: 600px) { + .module { + font-size: 10px; + max-height: 75px; } +} +@media (max-width: 1024px) { + .grid { + margin: 0; + } + .module { + min-width: 60px; + } +} diff --git a/app/dashboard.component.ts b/app/dashboard.component.ts index 0940d09..cb45b10 100644 --- a/app/dashboard.component.ts +++ b/app/dashboard.component.ts @@ -6,7 +6,8 @@ import { HeroService } from './hero.service'; @Component({ moduleId: module.id, selector: 'my-dashboard', - templateUrl: 'dashboard.component.html' + templateUrl: 'dashboard.component.html', + styleUrls: [ 'dashboard.component.css' ] }) export class DashboardComponent { diff --git a/app/hero-detail.component.css b/app/hero-detail.component.css new file mode 100644 index 0000000..f6139ba --- /dev/null +++ b/app/hero-detail.component.css @@ -0,0 +1,29 @@ +label { + display: inline-block; + width: 3em; + margin: .5em 0; + color: #607D8B; + font-weight: bold; +} +input { + height: 2em; + font-size: 1em; + padding-left: .4em; +} +button { + margin-top: 20px; + font-family: Arial; + background-color: #eee; + border: none; + padding: 5px 10px; + border-radius: 4px; + cursor: pointer; cursor: hand; +} +button:hover { + background-color: #cfd8dc; +} +button:disabled { + background-color: #eee; + color: #ccc; + cursor: auto; +} diff --git a/app/hero-detail.component.ts b/app/hero-detail.component.ts index 7e4bcc1..bd88ecd 100644 --- a/app/hero-detail.component.ts +++ b/app/hero-detail.component.ts @@ -1,22 +1,19 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; import { Location } from '@angular/common'; import 'rxjs/add/operator/switchMap'; -import { Hero } from './hero'; import { HeroService } from './hero.service'; @Component({ moduleId: module.id, selector: 'my-hero-detail', templateUrl: 'hero-detail.component.html', + styleUrls: [ 'hero-detail.component.css' ] }) export class HeroDetailComponent implements OnInit { - @Input() - hero: Hero; - ngOnInit(): void { this.route.params .switchMap((params: Params) => this.heroService.getHero(+params['id'])) From c19c7f20c863d152d30c8c81d968b62ca0895329 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 22 Jan 2017 18:34:33 +0900 Subject: [PATCH 38/44] =?UTF-8?q?app.component=E3=81=AE=E3=82=B9=E3=82=BF?= =?UTF-8?q?=E3=82=A4=E3=83=AB=E3=82=92=E8=AA=BF=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.css | 28 ++++++++++++++++++++++++++++ app/app.component.ts | 8 +++++--- 2 files changed, 33 insertions(+), 3 deletions(-) create mode 100644 app/app.component.css diff --git a/app/app.component.css b/app/app.component.css new file mode 100644 index 0000000..40e1aba --- /dev/null +++ b/app/app.component.css @@ -0,0 +1,28 @@ +h1 { + font-size: 1.2em; + color: #999; + margin-bottom: 0; +} +h2 { + font-size: 2em; + margin-top: 0; + padding-top: 0; +} +nav a { + padding: 5px 10px; + text-decoration: none; + margin-top: 10px; + display: inline-block; + background-color: #eee; + border-radius: 4px; +} +nav a:visited, a:link { + color: #607D8B; +} +nav a:hover { + color: #039be5; + background-color: #CFD8DC; +} +nav a.active { + color: #039be5; +} diff --git a/app/app.component.ts b/app/app.component.ts index 93cec3a..659a7fa 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -1,15 +1,17 @@ import { Component } from '@angular/core'; @Component({ + moduleId: module.id, selector: 'my-app', template:`

{{title}}

- ` + `, + stuleUrls: [ 'app.component.css' ] }) export class AppComponent { From c76e43f5e51397b6e451f3a236f0f81378add474 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 22 Jan 2017 18:39:07 +0900 Subject: [PATCH 39/44] =?UTF-8?q?=E3=83=90=E3=82=B0=E3=82=92=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.component.ts | 2 +- app/hero-detail.component.ts | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/app/app.component.ts b/app/app.component.ts index 659a7fa..cb4c452 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; `, - stuleUrls: [ 'app.component.css' ] + styleUrls: [ 'app.component.css' ] }) export class AppComponent { diff --git a/app/hero-detail.component.ts b/app/hero-detail.component.ts index bd88ecd..7f0c4d1 100644 --- a/app/hero-detail.component.ts +++ b/app/hero-detail.component.ts @@ -4,6 +4,7 @@ import { Location } from '@angular/common'; import 'rxjs/add/operator/switchMap'; +import { Hero } from './hero'; import { HeroService } from './hero.service'; @Component({ @@ -14,6 +15,8 @@ import { HeroService } from './hero.service'; }) export class HeroDetailComponent implements OnInit { + hero: Hero; + ngOnInit(): void { this.route.params .switchMap((params: Params) => this.heroService.getHero(+params['id'])) From d02f7690d09bbb4154c706b6845c62c6b105523f Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 5 Feb 2017 08:36:03 +0900 Subject: [PATCH 40/44] =?UTF-8?q?Hero=E3=83=87=E3=83=BC=E3=82=BF=E3=82=92i?= =?UTF-8?q?n=20memory=20=E3=81=8B=E3=82=89=E5=8F=96=E5=BE=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.module.ts | 7 ++++++ app/hero.service.ts | 20 ++++++++++++--- app/in-memory-data.service.ts | 18 ++++++++++++++ app/mock-heroes.ts | 14 ----------- npm-debug.log | 47 ----------------------------------- 5 files changed, 41 insertions(+), 65 deletions(-) create mode 100644 app/in-memory-data.service.ts delete mode 100644 app/mock-heroes.ts delete mode 100644 npm-debug.log diff --git a/app/app.module.ts b/app/app.module.ts index f9341e0..a9bad17 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -1,6 +1,7 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; +import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { DashboardComponent } from './dashboard.component'; @@ -10,10 +11,16 @@ import { HeroService } from './hero.service'; import { AppRoutingModule } from './app-routing.module'; +import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; +import { InMemoryDataService } from './in-memory-data.service'; + + @NgModule({ imports: [ BrowserModule, FormsModule, + HttpModule, + InMemoryWebApiModule.forRoot(InMemoryDataService), AppRoutingModule ], declarations: [ diff --git a/app/hero.service.ts b/app/hero.service.ts index 3840840..e5243cf 100644 --- a/app/hero.service.ts +++ b/app/hero.service.ts @@ -1,17 +1,29 @@ import { Injectable } from '@angular/core'; +import { Headers, Http } from '@angular/http'; -import { Hero } from './hero'; -// heroes のモックを読み込む -import { HEROES } from './mock-heroes'; +import 'rxjs/add/operator/toPromise'; +import { Hero } from './hero'; @Injectable() export class HeroService { + private heroesUrl = 'api/heroes'; // URL to web api + + constructor(private http: Http) { } + getHeroes(): Promise { - return Promise.resolve(HEROES); + return this.http.get(this.heroesUrl) + .toPromise() + .then(response => response.json().data as Hero[]) + .catch(this.handleError); } getHero(id: number): Promise { return this.getHeroes() .then(heroes => heroes.find(hero => hero.id === id)); } + + private handleError(error: any): Promise { + console.error('An error occurred', error); // for demo purposes only + return Promise.reject(error.message || error); + } } diff --git a/app/in-memory-data.service.ts b/app/in-memory-data.service.ts new file mode 100644 index 0000000..0f50f26 --- /dev/null +++ b/app/in-memory-data.service.ts @@ -0,0 +1,18 @@ +import { InMemoryDbService } from 'angular-in-memory-web-api'; +export class InMemoryDataService implements InMemoryDbService { + createDb() { + let heroes = [ + {id: 11, name: 'Mr. Nice'}, + {id: 12, name: 'Narco'}, + {id: 13, name: 'Bombasto'}, + {id: 14, name: 'Celeritas'}, + {id: 15, name: 'Magneta'}, + {id: 16, name: 'RubberMan'}, + {id: 17, name: 'Dynama'}, + {id: 18, name: 'Dr IQ'}, + {id: 19, name: 'Magma'}, + {id: 20, name: 'Tornado'} + ]; + return {heroes}; + } +} diff --git a/app/mock-heroes.ts b/app/mock-heroes.ts deleted file mode 100644 index 80dfe9e..0000000 --- a/app/mock-heroes.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Hero } from './hero'; - -export const HEROES: Hero[] = [ - {id: 11, name: 'Mr. Nice'}, - {id: 12, name: 'Narco'}, - {id: 13, name: 'Bombasto'}, - {id: 14, name: 'Celeritas'}, - {id: 15, name: 'Magneta'}, - {id: 16, name: 'RubberMan'}, - {id: 17, name: 'Dynama'}, - {id: 18, name: 'Dr IQ'}, - {id: 19, name: 'Magma'}, - {id: 20, name: 'Tornado'} -]; diff --git a/npm-debug.log b/npm-debug.log deleted file mode 100644 index 51b6c85..0000000 --- a/npm-debug.log +++ /dev/null @@ -1,47 +0,0 @@ -0 info it worked if it ends with ok -1 verbose cli [ '/Users/ikepon/.nvm/versions/node/v5.10.1/bin/node', -1 verbose cli '/Users/ikepon/.nvm/versions/node/v5.10.1/bin/npm', -1 verbose cli 'start' ] -2 info using npm@4.1.1 -3 info using node@v5.10.1 -4 verbose run-script [ 'prestart', 'start', 'poststart' ] -5 info lifecycle angular-quickstart@1.0.0~prestart: angular-quickstart@1.0.0 -6 silly lifecycle angular-quickstart@1.0.0~prestart: no script for prestart, continuing -7 info lifecycle angular-quickstart@1.0.0~start: angular-quickstart@1.0.0 -8 verbose lifecycle angular-quickstart@1.0.0~start: unsafe-perm in lifecycle true -9 verbose lifecycle angular-quickstart@1.0.0~start: PATH: /Users/ikepon/.nvm/versions/node/v5.10.1/lib/node_modules/npm/bin/node-gyp-bin:/Users/ikepon/ikepon/00_DIG/angular-quickstart/node_modules/.bin:/Users/ikepon/.nvm/versions/node/v5.10.1/bin:/usr/local/heroku/bin:/Users/ikepon/.rbenv/shims:/Users/ikepon/.rbenv/shims:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin -10 verbose lifecycle angular-quickstart@1.0.0~start: CWD: /Users/ikepon/ikepon/00_DIG/angular-quickstart -11 silly lifecycle angular-quickstart@1.0.0~start: Args: [ '-c', 'tsc && concurrently "tsc -w" "lite-server" ' ] -12 silly lifecycle angular-quickstart@1.0.0~start: Returned: code: 2 signal: null -13 info lifecycle angular-quickstart@1.0.0~start: Failed to exec start script -14 verbose stack Error: angular-quickstart@1.0.0 start: `tsc && concurrently "tsc -w" "lite-server" ` -14 verbose stack Exit status 2 -14 verbose stack at EventEmitter. (/Users/ikepon/.nvm/versions/node/v5.10.1/lib/node_modules/npm/lib/utils/lifecycle.js:279:16) -14 verbose stack at emitTwo (events.js:100:13) -14 verbose stack at EventEmitter.emit (events.js:185:7) -14 verbose stack at ChildProcess. (/Users/ikepon/.nvm/versions/node/v5.10.1/lib/node_modules/npm/lib/utils/spawn.js:40:14) -14 verbose stack at emitTwo (events.js:100:13) -14 verbose stack at ChildProcess.emit (events.js:185:7) -14 verbose stack at maybeClose (internal/child_process.js:850:16) -14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5) -15 verbose pkgid angular-quickstart@1.0.0 -16 verbose cwd /Users/ikepon/ikepon/00_DIG/angular-quickstart -17 error Darwin 15.6.0 -18 error argv "/Users/ikepon/.nvm/versions/node/v5.10.1/bin/node" "/Users/ikepon/.nvm/versions/node/v5.10.1/bin/npm" "start" -19 error node v5.10.1 -20 error npm v4.1.1 -21 error code ELIFECYCLE -22 error angular-quickstart@1.0.0 start: `tsc && concurrently "tsc -w" "lite-server" ` -22 error Exit status 2 -23 error Failed at the angular-quickstart@1.0.0 start script 'tsc && concurrently "tsc -w" "lite-server" '. -23 error Make sure you have the latest version of node.js and npm installed. -23 error If you do, this is most likely a problem with the angular-quickstart package, -23 error not with npm itself. -23 error Tell the author that this fails on your system: -23 error tsc && concurrently "tsc -w" "lite-server" -23 error You can get information on how to open an issue for this project with: -23 error npm bugs angular-quickstart -23 error Or if that isn't available, you can get their info via: -23 error npm owner ls angular-quickstart -23 error There is likely additional logging output above. -24 verbose exit [ 1, true ] From 90ac81ba2445dd3dbb4a5b815c1be956fded7270 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 5 Feb 2017 09:20:12 +0900 Subject: [PATCH 41/44] =?UTF-8?q?Hero=E3=82=92=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/hero-detail.component.html | 1 + app/hero-detail.component.ts | 5 +++++ app/hero.service.ts | 21 ++++++++++++++++----- 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/app/hero-detail.component.html b/app/hero-detail.component.html index deb47fb..9ef390c 100644 --- a/app/hero-detail.component.html +++ b/app/hero-detail.component.html @@ -6,5 +6,6 @@

{{hero.name}} details!

+ diff --git a/app/hero-detail.component.ts b/app/hero-detail.component.ts index 7f0c4d1..a8ed5bb 100644 --- a/app/hero-detail.component.ts +++ b/app/hero-detail.component.ts @@ -29,6 +29,11 @@ export class HeroDetailComponent implements OnInit { private location: Location ) {} + save(): void { + this.heroService.update(this.hero) + .then(() => this.goBack()); + } + goBack(): void { this.location.back(); } diff --git a/app/hero.service.ts b/app/hero.service.ts index e5243cf..f68839b 100644 --- a/app/hero.service.ts +++ b/app/hero.service.ts @@ -8,18 +8,29 @@ import { Hero } from './hero'; @Injectable() export class HeroService { private heroesUrl = 'api/heroes'; // URL to web api + private headers = new Headers({'Content-Type': 'application/json'}); constructor(private http: Http) { } getHeroes(): Promise { return this.http.get(this.heroesUrl) - .toPromise() - .then(response => response.json().data as Hero[]) - .catch(this.handleError); + .toPromise() + .then(response => response.json().data as Hero[]) + .catch(this.handleError); } getHero(id: number): Promise { - return this.getHeroes() - .then(heroes => heroes.find(hero => hero.id === id)); + const url = `${this.heroesUrl}/${id}`; + return this.http.get(url) + .toPromise() + .then(response => response.json().data as Hero) + .catch(this.handleError); + } + update(hero: Hero): Promise { + const url = `${this.heroesUrl}/${hero.id}`; + return this.http.put(url, JSON.stringify(hero), {headers: this.headers}) + .toPromise() + .then(() => hero) + .catch(this.handleError); } private handleError(error: any): Promise { From 094d942456bc1d10db3f649b866c8781f0d5072b Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 5 Feb 2017 09:27:47 +0900 Subject: [PATCH 42/44] =?UTF-8?q?Hero=E3=82=92=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/hero.service.ts | 6 ++++++ app/heroes.component.html | 6 ++++++ app/heroes.component.ts | 10 ++++++++++ 3 files changed, 22 insertions(+) diff --git a/app/hero.service.ts b/app/hero.service.ts index f68839b..06b4eae 100644 --- a/app/hero.service.ts +++ b/app/hero.service.ts @@ -25,6 +25,12 @@ export class HeroService { .then(response => response.json().data as Hero) .catch(this.handleError); } + create(name: string): Promise { + return this.http.post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers}) + .toPromise() + .then(res => res.json().data) + .catch(this.handleError); + } update(hero: Hero): Promise { const url = `${this.heroesUrl}/${hero.id}`; return this.http.put(url, JSON.stringify(hero), {headers: this.headers}) diff --git a/app/heroes.component.html b/app/heroes.component.html index 85d639f..e0fa92b 100644 --- a/app/heroes.component.html +++ b/app/heroes.component.html @@ -1,4 +1,10 @@

My Heroes

+
+ + +
  • {{hero.id}} {{hero.name}} diff --git a/app/heroes.component.ts b/app/heroes.component.ts index ea9ba1a..eca412e 100644 --- a/app/heroes.component.ts +++ b/app/heroes.component.ts @@ -24,6 +24,16 @@ export class HeroesComponent implements OnInit { this.heroService.getHeroes().then(heroes => this.heroes = heroes); } + add(name: string): void { + name = name.trim(); + if(!name) { return; } + this.heroService.create(name) + .then(hero => { + this.heroes.push(hero); + this.selectedHero = null; + }); + } + ngOnInit(): void { this.getHeroes(); } From 1a4be95807d430a00abbdb136258e3007542370c Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 5 Feb 2017 09:42:38 +0900 Subject: [PATCH 43/44] =?UTF-8?q?Hero=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/hero.service.ts | 7 +++++++ app/heroes.component.css | 8 ++++++++ app/heroes.component.html | 4 +++- app/heroes.component.ts | 8 ++++++++ 4 files changed, 26 insertions(+), 1 deletion(-) diff --git a/app/hero.service.ts b/app/hero.service.ts index 06b4eae..8de8c76 100644 --- a/app/hero.service.ts +++ b/app/hero.service.ts @@ -38,6 +38,13 @@ export class HeroService { .then(() => hero) .catch(this.handleError); } + delete(id: number): Promise { + const url = `${this.heroesUrl}/${id}`; + return this.http.delete(url, {headers: this.headers}) + .toPromise() + .then(() => null) + .catch(this.handleError); + } private handleError(error: any): Promise { console.error('An error occurred', error); // for demo purposes only diff --git a/app/heroes.component.css b/app/heroes.component.css index c97fa65..cacc340 100644 --- a/app/heroes.component.css +++ b/app/heroes.component.css @@ -45,3 +45,11 @@ margin-right: .8em; border-radius: 4px 0 0 4px; } + +button.delete { + float:right; + margin-top: 2px; + margin-right: .8em; + background-color: gray !important; + color:white; +} diff --git a/app/heroes.component.html b/app/heroes.component.html index e0fa92b..cf0b311 100644 --- a/app/heroes.component.html +++ b/app/heroes.component.html @@ -7,7 +7,9 @@

    My Heroes

    • - {{hero.id}} {{hero.name}} + {{hero.id}} + {{hero.name}} +
    diff --git a/app/heroes.component.ts b/app/heroes.component.ts index eca412e..d0b14a3 100644 --- a/app/heroes.component.ts +++ b/app/heroes.component.ts @@ -34,6 +34,14 @@ export class HeroesComponent implements OnInit { }); } + delete(hero: Hero): void { + this.heroService.delete(hero.id) + .then(() => { + this.heroes = this.heroes.filter(h => h !== hero); + if (this.selectedHero === hero) { this.selectedHero = null; } + }); + } + ngOnInit(): void { this.getHeroes(); } From f45f99037cfce92737eee68fa2ed4ca4c8121d00 Mon Sep 17 00:00:00 2001 From: ikepon Date: Sun, 5 Feb 2017 12:21:01 +0900 Subject: [PATCH 44/44] =?UTF-8?q?Hero=E6=A4=9C=E7=B4=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.module.ts | 3 ++ app/dashboard.component.html | 1 + app/hero-search.component.css | 14 ++++++++ app/hero-search.component.html | 8 +++++ app/hero-search.component.ts | 58 ++++++++++++++++++++++++++++++++++ app/hero-search.service.ts | 17 ++++++++++ 6 files changed, 101 insertions(+) create mode 100644 app/hero-search.component.css create mode 100644 app/hero-search.component.html create mode 100644 app/hero-search.component.ts create mode 100644 app/hero-search.service.ts diff --git a/app/app.module.ts b/app/app.module.ts index a9bad17..f9e9c8a 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -7,6 +7,8 @@ import { AppComponent } from './app.component'; import { DashboardComponent } from './dashboard.component'; import { HeroesComponent } from './heroes.component'; import { HeroDetailComponent } from './hero-detail.component'; +import { HeroSearchComponent } from './hero-search.component' + import { HeroService } from './hero.service'; import { AppRoutingModule } from './app-routing.module'; @@ -27,6 +29,7 @@ import { InMemoryDataService } from './in-memory-data.service'; AppComponent, DashboardComponent, HeroesComponent, + HeroSearchComponent, HeroDetailComponent ], providers: [ diff --git a/app/dashboard.component.html b/app/dashboard.component.html index 2a471cc..937931a 100644 --- a/app/dashboard.component.html +++ b/app/dashboard.component.html @@ -6,3 +6,4 @@

    {{hero.name}}

    + diff --git a/app/hero-search.component.css b/app/hero-search.component.css new file mode 100644 index 0000000..f6b5c59 --- /dev/null +++ b/app/hero-search.component.css @@ -0,0 +1,14 @@ +.search-result{ + border-bottom: 1px solid gray; + border-left: 1px solid gray; + border-right: 1px solid gray; + width:195px; + height: 20px; + padding: 5px; + background-color: white; + cursor: pointer; +} +#search-box{ + width: 200px; + height: 20px; +} diff --git a/app/hero-search.component.html b/app/hero-search.component.html new file mode 100644 index 0000000..15d7c6c --- /dev/null +++ b/app/hero-search.component.html @@ -0,0 +1,8 @@ +
    +

    Hero Search

    + +
    +
    + {{hero.name}} +
    +
    diff --git a/app/hero-search.component.ts b/app/hero-search.component.ts new file mode 100644 index 0000000..fc827be --- /dev/null +++ b/app/hero-search.component.ts @@ -0,0 +1,58 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; + +import { Observable } from 'rxjs/Observable'; +import { Subject } from 'rxjs/Subject'; + +// Observable class extensions +import 'rxjs/add/observable/of'; + +// Observable operators +import 'rxjs/add/operator/catch'; +import 'rxjs/add/operator/debounceTime'; +import 'rxjs/add/operator/distinctUntilChanged'; + +import { HeroSearchService } from './hero-search.service'; +import { Hero } from './hero'; + +@Component({ + moduleId: module.id, + selector: 'hero-search', + templateUrl: './hero-search.component.html', + styleUrls: [ './hero-search.component.css' ], + providers: [HeroSearchService] +}) +export class HeroSearchComponent implements OnInit { + heroes: Observable; + private searchTerms = new Subject(); + + constructor( + private heroSearchService: HeroSearchService, + private router: Router) {} + + // Push a search term into the observable stream. + search(term: string): void { + this.searchTerms.next(term); + } + + ngOnInit(): void { + this.heroes = this.searchTerms + .debounceTime(300) // wait 300ms after each keystroke before considering the term + .distinctUntilChanged() // ignore if next search term is same as previous + .switchMap(term => term // switch to new observable each time the term changes + // return the http search observable + ? this.heroSearchService.search(term) + // or the observable of empty heroes if there was no search term + : Observable.of([])) + .catch(error => { + // TODO: add real error handling + console.log(error); + return Observable.of([]); + }); + } + + gotoDetail(hero: Hero): void { + let link = ['/detail', hero.id]; + this.router.navigate(link); + } +} diff --git a/app/hero-search.service.ts b/app/hero-search.service.ts new file mode 100644 index 0000000..23fbffa --- /dev/null +++ b/app/hero-search.service.ts @@ -0,0 +1,17 @@ +import { Injectable } from '@angular/core'; +import { Http } from '@angular/http'; + +import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/operator/map'; + +import { Hero } from './hero'; + +@Injectable() +export class HeroSearchService { + constructor(private http: Http) {} + + search(term: string): Observable { + return this.http.get(`app/heroes/?name=${term}`) + .map(response => response.json().data as Hero[]); + } +}