AngularJSのDirectiveで俺俺タグつくっちゃお
ー Directive入門 ー

Fukuoka Frontend Frogs特別編
2014/2/28(金)『JavaScript MVC勉強会』
Photo by Web制作向け...
!

-自己紹介株式会社キャムの江原と申します。
プログラムしてます。
@itokami1123
企業の経営戦略に役立つサービス「CAM MACS」を
AWSにて提供してます。
弊社製品のUIを改善すべく
JavaScript MV*の導入を検討しています。
やっぱりJSで大規模は不安ですよね。。(デスマ怖い..)
!

多人数で開発する為
 ・どうやって品質を保つの?
 ・学習・導入のコストはどうするの?
 ・生産性は良いの?
などなど課題が一杯です…
そこでJSFのように共通部品をカスタムタグで作り
その組合せで画面を作ってもらう提案を考えています。
!

 品質を保つ     
 学習・導入コスト ▶ 決まった書式でサクサクと!
 生産性UP   
(

そんな都合の良い機能あるの〜?

AngularJSにDirectiveて機能があるよ!
独自の属性を作ったり..

独自のタグが作れます
では早速作ってみましょう!
AngularJSの標準のDirectiveを復習しましょう!

- demo -

http://embed.plnkr.co/zsQ7dMjMGgdYjXtkqkE3/preview
こんな画面を作ります。

選んだボタンの
文字が表示される

- demo -

http://embed.plnkr.co/zsQ7dMjMGgdYjXtkqkE3/preview
ngApp Directiveにて
作成したappモジュールを
初期起動に指定します。

右に[]がある時は作成で
無い時は参照です!
ngController Directiveにて
このDOMを監視する
コントローラを指定します。
ngRepeat Directiveにて
繰り返しボタンを描画します。
ngClick Directiveにて
ボタン押下処理を記述します。
選択した揚げ物が表示
オレオレ独自タグを作ってみましょう!
この固まりと同じ動きをする…

<agemon /> タグを作ります。
Directive名 agemon を作成
restrict: 'A' // 属性のみ(デフォルト)
restrict: 'E' // 要素のみ
restrict: 'AE' // 属性または要素
replace: true // 自身を入替
...
http://embed.plnkr.co/syJrpbfFhqU9t20vvPBk/preview
オレオレ独自タグを作ってみましょう!2
さっきの例では中身まで消えてしまいました。
中身のテキストを利用するタグを作ってみます。
piza Directiveは
挿入位置を決めて transclude:true

karaage Directiveは そのまま
中身を挿入して使用します

http://embed.plnkr.co/PAANwpyZnt8Py84FI0d5/preview
オレオレ独自属性を作ってみましょう!
今度は spanタグに オレオレ属性 wao-wao を追加します。
DirectiveにwaoWao登録!区切り文字大文字

linkは
scopeと
紐付します

DOM操作はControllerでは無くDirectiveが担当します。
(注意: jQueryを使用しています。)
クリック

http://embed.plnkr.co/VxYNUTTmCKLc8HOWwErl/preview
まとめ!
AngularJSのDirective機能をうまく使えば
HTMLに埋め込むだけで共通部品が使う事が出来ます!
極めればサクサク作れそう!
しかし、課題が…
大規模になるとたくさんあるDirectiveを探したり
タイプミスを発見するのがむずかしいです…
そこで弊社は TypeScriptの導入を考えています!
皆さん一緒に MV*を書く言語として
AltJSも勉強しませんか??
ご清聴ありがとうございました!
Upcoming SlideShare
Loading in …5
×

AngularJSのDirectiveで俺俺タグつくっちゃお

2,537 views

Published on

2014/2/28(金)19:30
Fukuoka Frontend Frogs特別編『JavaScript MVC勉強会』にて発表させていただいた資料です。

株式会社ベータソフト様、会場のご提供ありがとうございました!
http://www.betasoft.co.jp/

Zussarページ: http://www.zusaar.com/event/3937006
Twitterハッシュ: #FukuokaFF

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,537
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
15
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

AngularJSのDirectiveで俺俺タグつくっちゃお

  1. 1. AngularJSのDirectiveで俺俺タグつくっちゃお ー Directive入門 ー Fukuoka Frontend Frogs特別編 2014/2/28(金)『JavaScript MVC勉強会』 Photo by Web制作向け無料写真素材/ぱくたそ http://www.pakutaso.com
  2. 2. ! -自己紹介株式会社キャムの江原と申します。 プログラムしてます。 @itokami1123 企業の経営戦略に役立つサービス「CAM MACS」を AWSにて提供してます。
  3. 3. 弊社製品のUIを改善すべく JavaScript MV*の導入を検討しています。
  4. 4. やっぱりJSで大規模は不安ですよね。。(デスマ怖い..) ! 多人数で開発する為  ・どうやって品質を保つの?  ・学習・導入のコストはどうするの?  ・生産性は良いの? などなど課題が一杯です…
  5. 5. そこでJSFのように共通部品をカスタムタグで作り その組合せで画面を作ってもらう提案を考えています。 !  品質を保つ       学習・導入コスト ▶ 決まった書式でサクサクと!  生産性UP   
  6. 6. ( そんな都合の良い機能あるの〜? AngularJSにDirectiveて機能があるよ!
  7. 7. 独自の属性を作ったり.. 独自のタグが作れます
  8. 8. では早速作ってみましょう!
  9. 9. AngularJSの標準のDirectiveを復習しましょう! - demo - http://embed.plnkr.co/zsQ7dMjMGgdYjXtkqkE3/preview
  10. 10. こんな画面を作ります。 選んだボタンの 文字が表示される - demo - http://embed.plnkr.co/zsQ7dMjMGgdYjXtkqkE3/preview
  11. 11. ngApp Directiveにて 作成したappモジュールを 初期起動に指定します。 右に[]がある時は作成で 無い時は参照です!
  12. 12. ngController Directiveにて このDOMを監視する コントローラを指定します。
  13. 13. ngRepeat Directiveにて 繰り返しボタンを描画します。
  14. 14. ngClick Directiveにて ボタン押下処理を記述します。
  15. 15. 選択した揚げ物が表示
  16. 16. オレオレ独自タグを作ってみましょう!
  17. 17. この固まりと同じ動きをする… <agemon /> タグを作ります。
  18. 18. Directive名 agemon を作成 restrict: 'A' // 属性のみ(デフォルト) restrict: 'E' // 要素のみ restrict: 'AE' // 属性または要素 replace: true // 自身を入替 利用するHTML側から$scope変数などのパラメータをDirective側 に渡す事が出来ます! こうする事で利用される側(Directive側)の依存が少なくコードが書 けますね!
  19. 19. http://embed.plnkr.co/syJrpbfFhqU9t20vvPBk/preview
  20. 20. オレオレ独自タグを作ってみましょう!2
  21. 21. さっきの例では中身まで消えてしまいました。 中身のテキストを利用するタグを作ってみます。
  22. 22. piza Directiveは 挿入位置を決めて transclude:true karaage Directiveは そのまま
  23. 23. 中身を挿入して使用します http://embed.plnkr.co/PAANwpyZnt8Py84FI0d5/preview
  24. 24. オレオレ独自属性を作ってみましょう!
  25. 25. 今度は spanタグに オレオレ属性 wao-wao を追加します。
  26. 26. DirectiveにwaoWao登録!区切り文字大文字 linkは scopeと 紐付します DOM操作はControllerでは無くDirectiveが担当します。 (注意: jQueryを使用しています。)
  27. 27. クリック http://embed.plnkr.co/VxYNUTTmCKLc8HOWwErl/preview
  28. 28. まとめ!
  29. 29. AngularJSのDirective機能をうまく使えば HTMLに埋め込むだけで共通部品が使う事が出来ます! 極めればサクサク作れそう!
  30. 30. しかし、課題が… 大規模になるとたくさんあるDirectiveを探したり タイプミスを発見するのがむずかしいです…
  31. 31. そこで弊社は TypeScriptの導入を考えています! 皆さん一緒に MV*を書く言語として AltJSも勉強しませんか??
  32. 32. ご清聴ありがとうございました!

×