2014/2/28(金)19:30 Fukuoka Frontend Frogs特別編『JavaScript MVC勉強会』にて発表させていただいた資料です。 株式会社ベータソフト様、会場のご提供ありがとうございました！ http://www.betasoft.co.jp/ Zussarページ： http://www.zusaar.com/event/3937006 Twitterハッシュ: #FukuokaFF

1. AngularJSのDirectiveで俺俺タグつくっちゃお
ー Directive入門 ー
Fukuoka Frontend Frogs特別編
2014/2/28(金)『JavaScript MVC勉強会』
Photo by Web制作向け無料写真素材／ぱくたそ http://www.pakutaso.com

2. !
-自己紹介株式会社キャムの江原と申します。
プログラムしてます。
@itokami1123
企業の経営戦略に役立つサービス「CAM MACS」を
AWSにて提供してます。

3. 弊社製品のUIを改善すべく
JavaScript MV*の導入を検討しています。

4. やっぱりJSで大規模は不安ですよね。。（デスマ怖い..)
!
多人数で開発する為
・どうやって品質を保つの？
・学習・導入のコストはどうするの？
・生産性は良いの？
などなど課題が一杯です…

5. そこでJSFのように共通部品をカスタムタグで作り
その組合せで画面を作ってもらう提案を考えています。
!
品質を保つ
学習・導入コスト ▶ 決まった書式でサクサクと！
生産性UP

6. (
そんな都合の良い機能あるの〜？
AngularJSにDirectiveて機能があるよ！

7. 独自の属性を作ったり..
独自のタグが作れます

8. では早速作ってみましょう！

9. AngularJSの標準のDirectiveを復習しましょう！
- demo -
http://embed.plnkr.co/zsQ7dMjMGgdYjXtkqkE3/preview

10. こんな画面を作ります。
選んだボタンの
文字が表示される
- demo -
http://embed.plnkr.co/zsQ7dMjMGgdYjXtkqkE3/preview

11. ngApp Directiveにて
作成したappモジュールを
初期起動に指定します。
右に[]がある時は作成で
無い時は参照です！

12. ngController Directiveにて
このDOMを監視する
コントローラを指定します。

13. ngRepeat Directiveにて
繰り返しボタンを描画します。

14. ngClick Directiveにて
ボタン押下処理を記述します。

15. 選択した揚げ物が表示

16. オレオレ独自タグを作ってみましょう！

17. この固まりと同じ動きをする…
<agemon /> タグを作ります。

18. Directive名 agemon を作成
restrict: 'A' // 属性のみ（デフォルト）
restrict: 'E' // 要素のみ
restrict: 'AE' // 属性または要素
replace: true // 自身を入替
利用するHTML側から$scope変数などのパラメータをDirective側
に渡す事が出来ます！
こうする事で利用される側(Directive側)の依存が少なくコードが書
けますね！

19. http://embed.plnkr.co/syJrpbfFhqU9t20vvPBk/preview

20. オレオレ独自タグを作ってみましょう！２

21. さっきの例では中身まで消えてしまいました。
中身のテキストを利用するタグを作ってみます。

22. piza Directiveは
挿入位置を決めて transclude:true
karaage Directiveは そのまま

23. 中身を挿入して使用します
http://embed.plnkr.co/PAANwpyZnt8Py84FI0d5/preview

24. オレオレ独自属性を作ってみましょう！

25. 今度は spanタグに オレオレ属性 wao-wao を追加します。

26. DirectiveにwaoWao登録！区切り文字大文字
linkは
scopeと
紐付します
DOM操作はControllerでは無くDirectiveが担当します。
(注意： jQueryを使用しています。）

27. クリック
http://embed.plnkr.co/VxYNUTTmCKLc8HOWwErl/preview

28. まとめ！

29. AngularJSのDirective機能をうまく使えば
HTMLに埋め込むだけで共通部品が使う事が出来ます！
極めればサクサク作れそう！

30. しかし、課題が…
大規模になるとたくさんあるDirectiveを探したり
タイプミスを発見するのがむずかしいです…

31. そこで弊社は TypeScriptの導入を考えています！
皆さん一緒に MV*を書く言語として
AltJSも勉強しませんか？？

32. ご清聴ありがとうございました！