Tweet
Tweet

Slide 1

Slide 1 text

Angular 2 コンポーネント指向の第一歩 22 Apr 2016 / HTML5とか勉強会 @armorik83

Slide 2

Slide 2 text

奥野 賢太郎
 @armorik83 京都市出身 ng-kyoto代表 ChatWork株式会社

Slide 3

Slide 3 text

https://angular.io

Slide 4

Slide 4 text

Angular 2 デスクトップ・ブラウザと モバイルのための フレームワーク

Slide 5

Slide 5 text

話すこと よくあるAngular 1 JavaScriptでも大型アプリケーションを構築する時代へ Angular 2でコンポーネント指向を始めよう

Slide 6

Slide 6 text

よくあるAngular 1

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

First name: {{firstName}}
Last name:
Full name: {{getFullName()}}

Set the first name:
Set the last name:
AngularJS Hub by Andrea Bresolin is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

Slide 9

Slide 9 text

Nested controllers with model variables defined directly on the scopes

(typing on an input field, with a data binding to the model, overrides the same variable of a parent scope)

First controller

First name: {{firstName}}

Set the first name:

Second controller (inside First)

First name (from First): {{firstName}}
Last name (new variable): {{lastName}}
Full name: {{getFullName()}}

Set the first name:
Set the last name:

Third controller (inside Second and First)

First name (from First): {{firstName}}
Middle name (new variable): {{middleName}}
Last name (from Second): {{$parent.lastName}}
Last name (redefined in Third): {{lastName}}
Full name (redefined in Third): {{getFullName()}}

Set the first name:
Set the middle name:
Set the last name:

Nested controllers with model variables defined inside objects

(typing on an input field, with a data binding to the model, acts on a specific object without overriding variables)

First controller

First name: {{firstModelObj.firstName}}

Set the first name:

Second controller (inside First)

First name (from First): {{firstModelObj.firstName}}
Last name (from Second): {{secondModelObj.lastName}}
Full name: {{getFullName()}}

Set the first name:
Set the last name:

Third controller (inside Second and First)

First name (from First): {{firstModelObj.firstName}}
Middle name (from Third): {{thirdModelObj.middleName}}
Last name (from Second): {{secondModelObj.lastName}}
Last name (from Third): {{thirdModelObj.lastName}}
Full name (redefined in Third): {{getFullName()}}

Set the first name:
Set the middle name:
Set the last name:
AngularJS Hub by Andrea Bresolin is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

Slide 10

Slide 10 text

Nested controllers with model variables defined directly on the scopes

(typing on an input field, with a data binding to the model, overrides the same variable of a parent scope)

First controller

First name: {{firstName}}

Set the first name:

Second controller (inside First)

First name (from First): {{firstName}}
Last name (new variable): {{lastName}}
Full name: {{getFullName()}}

Set the first name:
Set the last name:

Third controller (inside Second and First)

First name (from First): {{firstName}}
Middle name (new variable): {{middleName}}
Last name (from Second): {{$parent.lastName}}
Last name (redefined in Third): {{lastName}}
Full name (redefined in Third): {{getFullName()}}

Set the first name:
Set the middle name:
Set the last name:

Nested controllers with model variables defined inside objects

(typing on an input field, with a data binding to the model, acts on a specific object without overriding variables)

First controller

First name: {{firstModelObj.firstName}}

Set the first name:

Second controller (inside First)

First name (from First): {{firstModelObj.firstName}}
Last name (from Second): {{secondModelObj.lastName}}
Full name: {{getFullName()}}

Set the first name:
Set the last name:

Third controller (inside Second and First)

First name (from First): {{firstModelObj.firstName}}
Middle name (from Third): {{thirdModelObj.middleName}}
Last name (from Second): {{secondModelObj.lastName}}
Last name (from Third): {{thirdModelObj.lastName}}
Full name (redefined in Third): {{getFullName()}}

Set the first name:
Set the middle name:
Set the last name:
AngularJS Hub by Andrea Bresolin is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. だいたい こうなるよね

Slide 11

Slide 11 text

JavaScriptでも
 大型アプリケーションを構築する時代へ

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Facebook React

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

ES2015

Slide 16

Slide 16 text

今年は 2016年

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

TypeScript 1.8.10

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

TS ES2015

Slide 21

Slide 21 text

Angular 2 × TypeScript

Slide 22

Slide 22 text

静的型付け言語のコンパイルエラーで
 人為的なミスから
 アプリケーションを保護

Slide 23

Slide 23 text

IDE（統合開発環境）と
 型付き言語との相性は抜群！ 補完やソース間のジャンプで
 効率的な開発を

Slide 24

Slide 24 text

Angular 2 やるなら TypeScript

Slide 25

Slide 25 text

Angular 2の時代へ もう2の勉強を始めてOK まだ1も2も知らない人、1を予習しなくてOK

Slide 26

Slide 26 text

Angular 2で
 コンポーネント指向を始めよう

Slide 27

Slide 27 text

Nested controllers with model variables defined directly on the scopes

(typing on an input field, with a data binding to the model, overrides the same variable of a parent scope)

First controller

First name: {{firstName}}

Set the first name:

Second controller (inside First)

First name (from First): {{firstName}}
Last name (new variable): {{lastName}}
Full name: {{getFullName()}}

Set the first name:
Set the last name:

Third controller (inside Second and First)

First name (from First): {{firstName}}
Middle name (new variable): {{middleName}}
Last name (from Second): {{$parent.lastName}}
Last name (redefined in Third): {{lastName}}
Full name (redefined in Third): {{getFullName()}}

Set the first name:
Set the middle name:
Set the last name:

Nested controllers with model variables defined inside objects

(typing on an input field, with a data binding to the model, acts on a specific object without overriding variables)

First controller

First name: {{firstModelObj.firstName}}

Set the first name:

Second controller (inside First)

First name (from First): {{firstModelObj.firstName}}
Last name (from Second): {{secondModelObj.lastName}}
Full name: {{getFullName()}}

Set the first name:
Set the last name:

Third controller (inside Second and First)

First name (from First): {{firstModelObj.firstName}}
Middle name (from Third): {{thirdModelObj.middleName}}
Last name (from Second): {{secondModelObj.lastName}}
Last name (from Third): {{thirdModelObj.lastName}}
Full name (redefined in Third): {{getFullName()}}

Set the first name:
Set the middle name:
Set the last name:
AngularJS Hub by Andrea Bresolin is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. このまま 大規模アプリ作りますか

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Angular 2のコンポーネントはHTML / CSS の延長
 UIパーツごとに見やすく分割 複数人での分業開発を行いやすい
 コンポーネントは再利用が可能 コンポーネント指向

Slide 30

Slide 30 text

この2つを
 覚えてください @Component @Input

Slide 31

Slide 31 text

@Component

Slide 32

Slide 32 text

import {Component} from 'angular2/core'; export class Hero { id: number; name: string; } @Component({ selector: 'my-app', template: `

{{title}}

{{hero.name}} details!

id: {{hero.id}}
name:
` }) export class AppComponent { title = 'Tour of Heroes'; hero: Hero = { id: 1, name: 'Windstorm' }; }

Slide 33

Slide 33 text

import {Component} from 'angular2/core'; export class Hero { id: number; name: string; } @Component({ selector: 'my-app', template: `

{{title}}

{{hero.name}} details!

id: {{hero.id}}
name:
` }) export class AppComponent { title = 'Tour of Heroes'; hero: Hero = { id: 1, name: 'Windstorm' }; } Componentを定義するための
 デコレーター HTMLテンプレート と書けばその中に展開される このComponentの挙動を
 実装するクラス

Slide 34

Slide 34 text

import {Component} from 'angular2/core'; export class Hero { id: number; name: string; } @Component({ selector: 'my-app', template: `

{{title}}

{{hero.name}} details!

id: {{hero.id}}
name:
` }) export class AppComponent { title = 'Tour of Heroes'; hero: Hero = { id: 1, name: 'Windstorm' }; } このheroが テンプレートのheroに
 バインドされる このtitleが テンプレートのtitleに
 バインドされる

Slide 35

Slide 35 text

@Input

Slide 36

Slide 36 text

import {Component, Input} from 'angular2/core'; import {Hero} from './hero'; @Component({ selector: 'my-hero-detail', template: `

{{hero.name}} details!

id: {{hero.id}}
name:
` }) export class HeroDetailComponent { @Input() hero: Hero; }

Slide 37

Slide 37 text

import {Component, Input} from 'angular2/core'; import {Hero} from './hero'; @Component({ selector: 'my-hero-detail', template: `

{{hero.name}} details!

id: {{hero.id}}
name:
` }) export class HeroDetailComponent { @Input() hero: Hero; } heroという名のInputを定義

Slide 38

Slide 38 text

Slide 39

Slide 39 text

my-hero-detailの hero Inputに対して 自分が持ってるheroを与える

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

[]は@Input ()は@Output Inputと同じようにOutputも自分で定義できます

Slide 43

Slide 43 text

おまけ Component Styles

Slide 44

Slide 44 text

@Component({ selector: 'hero-app', template: `

Tour of Heroes

`, styles: ['h1 { font-weight: normal; }'], directives: [HeroAppMainComponent] })

Slide 45

Slide 45 text

@Component({ selector: 'hero-app', template: `

Tour of Heroes

`, styles: ['h1 { font-weight: normal; }'], directives: [HeroAppMainComponent] }) stylesプロパティに CSSの文字列を配列で記述 このコンポーネント以下にのみ適用できるスタイル

Slide 46

Slide 46 text

まとめ

Slide 47

Slide 47 text

HTMLにちょっと装飾・機能追加できたAngular 1とは違い、 Angular 2は簡潔に、堅牢にアプリケーションを
 実装するためのフレームワーク。 コンポーネント指向で適切に分割し、
 チームで開発しやすい、再利用しやすい、テストしやすい状態へ。

Slide 48

Slide 48 text

Angular 2 コンポーネント指向の第一歩 Thank you!