Más contenido relacionado
La actualidad más candente (20)
Similar a AngularJS 概説 (20)
Más de Kenichi Kanai (15)
AngularJS 概説
- 2. {{ about-me }}
金井 健一
フリーランス
AngularJS Japan User Group 管理人
Web先端技術味見部 副部長
twitter / @can_i_do_web
- 5. {{ 得意なこと }}
● CRUD系のアプリケーション
● 管理ページ・マイページ
● １ページで完結するアプリケーション
- 8. {{ 特徴 }}
● 双方向データバインディング
● テンプレートとしてのHTML
● 再利用可能なコンポーネント
● ビューとルーティング
● テストとその可用性
- 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 }}
-- 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);
- 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
