angular2についてangular1でいうアレがangular2でいうコレっていう形式で紹介したり

1. angular 1 脳で見るangular 2

2. 自己紹介
株式会社シーエーアドバンス
新川盛幸
業務系社内システム
ruby on rails、angularjs

3. 話すこと
1. 特徴
2. Template Syntax
3. Built-in Directive
4. Component指向
5. angular-cli
angularjsを触った事ある人向けに
なるべくangular1でいうコレがangular2でいうアレっていう形で話せればと思います。

4. Version
今から説明する事は、versionが変わっていろいろ更新される部分もあるかもしれません
が、どんな感じで書くのか、だいたいのイメージができればいいかなと思ってます。
試したversion = v2.0.0-alpha.44
今 = v2.0.0-alpha.46

5. 特徴

6. 速度
特徴

7. 変更検知
特徴

8. 開発言語の選択
angular2は生のjavascriptでも書けますが、typescript、dartなどのAltJSを選択して開発
できます。
普段はrubyに似た構文で書けるcoffeescriptで開発していますが、angularが推奨して
るっぽいのでtypescriptを使用した説明をします。
typescriptは次期javascriptの仕様となるES6由来の構文で書け、IDEのサポートも受けれ
ます。
特徴

9. 例
特徴
angular1とどのくらい変わったか比較
angular2でも開発言語の選択での違いを比較
<my-app>タグを<h1>にする
簡単なディレクティブの定義の例

10. Angular 1
特徴

11. 特徴
ng-appもng-controllerもなく、まとめてコンポーネント
(ディレクティブ)
$scopeもなくなり、thisを使う

12. TypeScript
特徴

13. TypeScript
特徴
Controller
Directive
必要なモジュールを
ロード
一番上の層のComponentは
bootstrapが必要

14. Template Syntax

15. {{}}
Template Syntax
{{}} = 展開

16. Filter => Pipe
Template Syntax

17. #
Template Syntax
# = エレメント

18. []
Template Syntax
[] = プロパティバインディング

19. []
Template Syntax
ng-* => [*]

20. []
Template Syntax
angular 1.x angular 2.x
<img ng-src=”image_url”> <img [src]=”image_url”>
<a ng-href=”page_url”> <a [href]=”page_url”>
<div ng-show=”true”> <div [visible]=”true”>
<div ng-hide=”false”> <div [hidden]=”false”>

21. []
Template Syntax
angular 1.x angular 2.x
<div ng-style=”color:red”> <div [style.color]=”red”>
<div [style.width.px]=”20”>
<div ng-class=”{‘active’:true}”> <div [class.active]=”true”>
<div [attr.class]=”active”>

22. ()
Template Syntax
() = イベントバインディング

23. ()
Template Syntax
ng-* => (*)

24. イベント
Template Syntax
<button ng-click=”onClick()”> <button (click)=”onClick()”>
<button ng-keyup=”keyup()”> <button (keyup)=”keyup()”>
<button (keyup.enter)=”enter()”>
<button ng-mouseover=”mouseover()”> <button (mouseover)=”mouseover()”>
ng-* => (*)

25. [()]
Template Syntax
[()] = 双方向データバインディング

26. [()]
Template Syntax

27. [()]
Template Syntax
角カッコ(プロパティバインディング )
[ng-model]だけでは値は入るが、変更
は検知しない
丸カッコ(イベントバインディング )
(ng-model-change)を利用して変更さ
れた値をnameに入れる

28. [()]
Template Syntax

29. [()]
Template Syntax
[] = プロパティ = ModelからViewへ
() = イベント= ViewからModelへ
[()] = 両方 = 双方向

30. Built-in Directives

31. ng-if
Built-in Directives
ng-if => *if

32. ng-repert
Built-in Directives
ng-repeat => *for

33. ng-model
Built-in Directives
ng-model => [(ng-model)]

34. ng-change
Built-in Directives
ng-change => (ng-model-change)

35. Component指向

36. Conponent
ConponentはController(ロジック)やView(html)を含んでいるパーツ
ログインフォームだったりメニューだったりをConponent化してまとめて作っていきます。
Component指向

37. Conponent
Component指向

38. Conponent
Component指向
適用するセレクタの指定 (restrict)
'cmp' = タグ
'[cmp]' = 属性
'cmp, [cmp]' = 両方
'button[cmp]' = buttonタグのcmp属性

39. Conponent
Component指向
展開するテンプレートの指定
templateで直接htmlを書いてもOK

40. Conponent
Component指向
適用するCSSの指定、なくてもOK

41. Conponent
Component指向
View側で使用するモジュールの指定
built-in directiveだったり、作成したコンポー
ネントだったり。
FORM_DIRECTIVESにはng−modelとか
が入っている。
使用するモジュールのロード

42. Shadow Dom
Componentが生成されるとShadow Domという要素になります。
htmlがカプセル化され、cssやjsが干渉しない要素
個人ならまだしもチームでcssを書いたり、大きいアプリケーションになるほどcssのクラス名
を全体に干渉しない名前を調べたり、htmlの子や孫セレクタで絞って適用したりするかと
思いますが、
読み込んだstyleはcomponent単位でのみ有効
Component指向

43. Shadow Dom
Component指向
my-componentは
BootstrapのCSSは当たるが

44. Shadow Dom
Component指向
my-componentがstyleUrlで
呼び出したcssは外部に影響しない

45. Componentの構造
Conponentの中に他のConponentを子として持ち、ツリー構造でアプリケーションを作っ
ていきます。
親は子にデータを渡したり、子は親にイベントを通知したりできます。
angular1でいう$scope.$broadcast、$scope.$onみたいなもの
Component指向

46. Componentの構造
Conponent指向

47. 親から子へ(attribute)
Component指向

48. 親から子へ(attribute)
Component指向
親が名前や年齢を渡す
子は@Inputで受け取る

49. 子から親へ(event)
Component指向

50. 子から親へ(event)
Component指向
親は子で定義された
eventを受け取る
子はEventEmitterを使って
eventを作る
作成したEventEmitterを
使ってeventを発行

51. angular-cli

52. https://github.com/angular/angular-cli
angular-cli

53. サーバー動かしたりlive-reloadとかtypescriptのコンパイルとか、
簡単にプロジェクトのセットアップをしてくれるnpmのパッケージ
簡単なscafoldがあったり、ディレクトリの分け方の統一ができたりする
angular-cli

54. SET UP
angular-cli

55. SCAFFOLD
angular-cli

56. angular1とかなり変わっていて、結構学習コストがかかりそうですが、速さの面でもメリット
が大きく、コンポーネント単位で組み立てていくangularjsは疎結合にしやすいし、一度
作ったコンポーネントの使い回しが楽そう。
紹介できたのはわずかですが、ajax周りとかanimationとか、まだまだ試せていないAPIが
いっぱいあるのでこれから勉強していきたいです。
angular-cliで簡単にangular2を試せるのでぜひ試してみてください。
Component指向
所感