Slide 1

Slide 1 text

Angular 2
 次に覚えたいフィーチャー Apr 10, Apr 16 2016
 東西合同開催 Angular 2 ハンズオン

Slide 2

Slide 2 text

@armorik83 はちさん

Slide 3

Slide 3 text

今回のハンズオンでは Angular 2の入門的なAPIを 扱っていきました

Slide 4

Slide 4 text

次に覚えておくとよい
 機能や特徴について
 まとめました ググるときのヒントに使ってね

Slide 5

Slide 5 text

templateUrl • @Component()のtemplateをtemplateUrlにして、
 そこにパスを書くことで、テンプレートは別ファイル
 として扱える @Component({ selector: 'my-app', providers: [], templateUrl: 'app.component.html', directives: [] })

Slide 6

Slide 6 text

styles • @Component()のstylesプロパティに
 文字列の配列を与えると、そのコンポーネントにのみ
 適用できるスタイルシートを記述できる @Component({ selector: 'hero-app', template: `

Tour of Heroes

`, styles: ['h1 { font-weight: normal; }'], directives: [HeroAppMainComponent] }) https://angular.io/docs/ts/latest/guide/component-styles.html

Slide 7

Slide 7 text

styleUrls • @Component()のstylesの外部ファイル参照版
 styleUrlsというのもある
 @Component({ selector: 'hero-details', template: `

{{hero.name}}

`, styleUrls: ['app/hero-details.component.css'], directives: [HeroTeamComponent] })

Slide 8

Slide 8 text

Pipe • Angular 1でいうFilterは使いやすく、実装もしやすい Pipeになった • 文字列を変換するPipeや、数値を変換するPipe、
 日付や金額を扱うPipeなど最初から色々入っている https://angular.io/docs/ts/latest/guide/pipes.html

Slide 9

Slide 9 text

読んでおくといいページ • Angular 1経験者には、2との違いが一覧表に
 なっているANGULAR 1 TO 2 QUICK REFERENCEを
 オススメ
 https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html • Angular 2のテンプレート構文をド忘れしたときは
 ANGULAR CHEAT SHEETをオススメ
 https://angular.io/docs/ts/latest/cheatsheet.html

Slide 10

Slide 10 text

楽しいAngular 2ライフを
 お過ごしください