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.
Last name:
Full name: {{getFullName()}}
Set the first name:
Set the last name:
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:
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:
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:
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: `
`
})
export class HeroDetailComponent {
@Input()
hero: Hero;
}
{{hero.name}} details!
id: {{hero.id}}
name:
Slide 37
Slide 37 text
import {Component, Input} from 'angular2/core';
import {Hero} from './hero';
@Component({
selector: 'my-hero-detail',
template: `
`
})
export class HeroDetailComponent {
@Input()
hero: Hero;
}
heroという名のInputを定義
{{hero.name}} details!
id: {{hero.id}}
name:
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!