More Related Content
What's hot (20)
Viewers also liked (19)
Similar to AngularJS 概説 (20)
More from Kenichi Kanai (15)
Recently uploaded (6)
AngularJS 概説
- 1. AngularJS 概説 第１回 Build Insider OFFLINE
- 2. {{ about-me }} 金井 健一 フリーランス AngularJS Japan User Group 管理人 奥别产先端技术味见部 副部長 twitter / @can_i_do_web
- 3. {{ AngularJS とは }} http://angularjs.org
- 5. {{ 得意なこと }} ● CRUD系のアプリケーション ● 管理ページ?マイページ ● １ページで完結するアプリケーション
- 6. {{ 苦手なこと }} ● モバイル向けアプリケーション ● ゲームなどのグラフィックの扱い
- 8. {{ 特徴 }} ● 双方向データバインディング ● テンプレートとしての贬罢惭尝 ● 再利用可能なコンポーネント ● ビューとルーティング ● テストとその可用性
- 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++); }); {{ 双方向データバインディング }}
- 11. {{ テンプレートとしての贬罢惭尝 }} -- 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. テンプレートとしての贬罢惭尝
- 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 -- //省略
- 15. {{ ビューとルーティング }} -- html -- <body> <div id="page"> // テンプレート内 <div><a href="#page1">ページ１</a></div> <div><a href="#page2">ページ２</a></div> </div> </body> -- by jQuery -- $(window).hashchange(function(){ var page = location.hash.replace('#', ''); $.get('/foo/' + page).then( function(html){ $('#page').html(html); } ); });
- 18. {{ UIなど }} ● AngularUI ● UI Utils ● UI Bootstrap ● NG-Grid ● UI Router ● ANGULAR MODULES
- 19. {{ ご参加ください }}
- 20. {{ ご参加ください }}
- 21. ご清聴ありがとうございました。