AngularJS 概説

15,710
-1

Published on

Build Insider OFFLINE #1 のスライドです

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

No Downloads
Views
Total Views
15,710
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

AngularJS 概説

  1. 1. AngularJS 概説第1回 Build Insider OFFLINE
  2. 2. {{ about-me }}金井 健一フリーランスAngularJS Japan User Group 管理人Web先端技術味見部 副部長twitter / @can_i_do_web
  3. 3. {{ AngularJS とは }}http://angularjs.org
  4. 4. {{ こんな書き方します }}
  5. 5. {{ 得意なこと }}● CRUD系のアプリケーション● 管理ページ・マイページ● 1ページで完結するアプリケーション
  6. 6. {{ 苦手なこと }}● モバイル向けアプリケーション● ゲームなどのグラフィックの扱い
  7. 7. {{ 開発環境}}http://yeoman.io/
  8. 8. {{ 特徴 }}● 双方向データバインディング● テンプレートとしてのHTML● 再利用可能なコンポーネント● ビューとルーティング● テストとその可用性
  9. 9. -- html --<input id="count" type="number" value="10"><input id="countBtn" type="button" vaule="count up">-- by jQuery --$(#countBtn).on(click, function(){var count = $(#count).value();$(#count).value(count++);});{{ 双方向データバインディング }}
  10. 10. {{ 双方向データバインディング }}
  11. 11. {{ テンプレートとしてのHTML }}-- html --<ul id="member-list"></ul><div id="template"><li><a><div><p class="name"></p><p class="age"></p></div></a></li></div>-- by jQuery --var template = $(#template).clone();$(.name, template).text(名前);$(.age, template).text(年齢);$(#member-list).append(template);
  12. 12. テンプレートとしてのHTML
  13. 13. {{ 再利用可能なコンポーネント }}-- html --<div id="tab"><ul><li id="tab1"></li><li id="tab2"></li><li id="tab3"></li></ul><div id="tab1-pane"></div><div id="tab2-pane"></div><div id="tab3-pane"></div></div>-- by jQuery --//省略
  14. 14. {{ 再利用可能なコンポーネント }}
  15. 15. {{ ビューとルーティング }}-- html --<body><div id="page">// テンプレート内<div><a href="#page1">ページ1</a></div><div><a href="#page2">ページ2</a></div></div></body>-- by jQuery --$(window).hashchange(function(){var page = location.hash.replace(#, );$.get(/foo/ + page).then( function(html){$(#page).html(html);} );});
  16. 16. {{ テストとその可用性}}http://karma-runner.github.io/0.8/index.html
  17. 17. 最後に。・モバイルについて話してみる
  18. 18. {{ UIなど }}● AngularUI● UI Utils● UI Bootstrap● NG-Grid● UI Router● ANGULAR MODULES
  19. 19. {{ ご参加ください }}
  20. 20. {{ ご参加ください }}
  21. 21. ご清聴ありがとうございました。

×