Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AngularJS 概説

16,939 views

Published on

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

Published in: Technology
  • Be the first to comment

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. ご清聴ありがとうございました。

×