AngularJSを浅めに紹介します
Upcoming SlideShare
Loading in...5
×
 

AngularJSを浅めに紹介します

on

  • 2,622 views

Google製JavaScriptフレームワークAngularJS(http://angularjs.org/)の良さを10分くらいで紹介するための資料です.身内向けの勉強会でしゃべるときに使いました...

Google製JavaScriptフレームワークAngularJS(http://angularjs.org/)の良さを10分くらいで紹介するための資料です.身内向けの勉強会でしゃべるときに使いました.

スライド中のサンプルコードはこちらに https://github.com/daisy1754/angular-simple-demo-flickr-cat

Statistics

Views

Total Views
2,622
Views on SlideShare
2,102
Embed Views
520

Actions

Likes
5
Downloads
12
Comments
1

4 Embeds 520

http://dots-web.nt-dev.info 397
http://dev.eventdots.jp 112
http://s.deeeki.com 7
https://dots-web.nt-dev.info 4

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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 2014/1/7
  • 今日の目的 AngularJSフレームワークを使ってみたいと思わせる 全てのうんこJavaScript コードを,生まれる前に 消し去りたい 2 © Magica Quartet
  • 脱線: JavaScriptの残念さと人々の戦い  貧弱な組み込みメソッド → 簡便な記述を可能にする便利ライブラリ jQuery underscore.js  残念なスコープの仕様 → モジュール化を支援するライブラリ require.js  View (HTML)と密結合なりがち → MV*系フレームワーク Knockout.js AngularJS Backbone.js  そもそもJavaScript書きたくない → いわゆるAltJSたち CoffeeScript TypeScript JSX 3 View slide
  • AngularJS,最近流行ってるぽい Google検索トレンド Qiita2013アドベントカレンダー ストック数比較 4 View slide
  • AngularJSのよろしいところ 発表目次 HTMLがそのままテンプレート  双方向データバインディングによるModel・Viewの同期  便利な組み込みserviceたち  組み込みdirectiveによるリスト・フィルタなどの定番処理  今日は省略 Dependency Injectionによるモジュール性の向上  Routing機構によって複数Viewを持つアプリも開発可能  5
  • テンプレートとしてのHTML, 双方向データバインディング 6 http://daisy1754.github.io/angular-simple-demo-flickr-cat/simplest-demo.html
  • テンプレートとしてのHTML, 双方向データバインディング AngularJSを利用するアプリの宣言 yourNameモデルの値を表示 Inputタグ(View)とyourName モデルの値をバインド Inputタグの値の変化が yourNameモデルに伝わり Viewも変化する 7 http://daisy1754.github.io/angular-simple-demo-flickr-cat/simplest-demo.html
  • AngularJSで簡単に実現できるページの例 FlickrからJSON形式で持ってきた画像の表示 + インタラクティブに絞り込み JS/HTMLあわせて40行くらい 8 http://daisy1754.github.io/angular-simple-demo-flickr-cat/flickr-cat.html
  • コード説明(1/3): API叩いてデータ取得 HTML このbodyタグで囲まれる部分は PhotoCtrlによって制御される JavaScript PhotoCtrlの宣言 組み込みの$httpを利用して, flickrAPIにアクセス,結果のJSONを 9 そのままモデルに格納
  • コード説明(2/3): 取得結果リストを表示 Ng-repeatが指定されたタグは 繰り返し処理される HTML 10
  • コード説明(3/3): リストのフィルタリング HTML titleFilterがtrueとなる要素のみ表示 JavaScript 11
  • まとめ 具体例を用いてAngularJSを紹介した HTMLをテンプレート的に利用  双方向データバインディング  ng-repeatなどの便利directive  $httpなどの便利service により,コード量減りつつDOMを意識せず クライアントサイドプログラミングができそう  12
  • 参考資料 AngularJS 勉強会のまとめ (動画・スライド) #ng_jp | Engine Yard Blog JP http://www.engineyard.co.jp/blog/2013/angularjs-meetup-4th/ AngularJS公式チュートリアル http://docs.angularjs.org/tutorial 今、AngularJSというフレームワークがヤバい - (゚∀゚)o彡 sasata299's blog http://blog.livedoor.jp/sasata299/archives/51966228.html 13