• Save
AngularJS 概説
Upcoming SlideShare
Loading in...5
×
 

AngularJS 概説

on

  • 12,631 views

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

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

Statistics

Views

Total Views
12,631
Views on SlideShare
1,733
Embed Views
10,898

Actions

Likes
6
Downloads
0
Comments
0

9 Embeds 10,898

http://www.buildinsider.net 10835
https://twitter.com 19
https://www.google.co.jp 15
http://webcache.googleusercontent.com 12
http://server01 8
http://www.google.co.jp 5
http://buildinsider.cloudapp.net 2
http://typewonder.com 1
http://127.0.0.1 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

AngularJS 概説 AngularJS 概説 Presentation Transcript

  • AngularJS 概説第1回 Build Insider OFFLINE
  • {{ about-me }}金井 健一フリーランスAngularJS Japan User Group 管理人Web先端技術味見部 副部長twitter / @can_i_do_web
  • {{ AngularJS とは }}http://angularjs.org
  • {{ こんな書き方します }}
  • {{ 得意なこと }}● CRUD系のアプリケーション● 管理ページ・マイページ● 1ページで完結するアプリケーション
  • {{ 苦手なこと }}● モバイル向けアプリケーション● ゲームなどのグラフィックの扱い
  • {{ 開発環境}}http://yeoman.io/
  • {{ 特徴 }}● 双方向データバインディング● テンプレートとしてのHTML● 再利用可能なコンポーネント● ビューとルーティング● テストとその可用性
  • -- 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++);});{{ 双方向データバインディング }}
  • {{ 双方向データバインディング }}
  • {{ テンプレートとしての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);
  • テンプレートとしてのHTML
  • {{ 再利用可能なコンポーネント }}-- 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 --//省略
  • {{ 再利用可能なコンポーネント }}
  • {{ ビューとルーティング }}-- 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);} );});
  • {{ テストとその可用性}}http://karma-runner.github.io/0.8/index.html
  • 最後に。・モバイルについて話してみる
  • {{ UIなど }}● AngularUI● UI Utils● UI Bootstrap● NG-Grid● UI Router● ANGULAR MODULES
  • {{ ご参加ください }}
  • {{ ご参加ください }}
  • ご清聴ありがとうございました。