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.
Upcoming SlideShare
Angular js 入門介紹
Next
Download to read offline and view in fullscreen.

10

Share

Download to read offline

AngularJSを浅めに紹介します

Download to read offline

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

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

AngularJSを浅めに紹介します

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

    Apr. 13, 2017
  • kojiyamaoka7

    Jan. 28, 2015
  • bislion

    Dec. 19, 2014
  • makotoohmori

    Nov. 2, 2014
  • takayukiwashino

    Oct. 19, 2014
  • sonomishiratori

    Sep. 26, 2014
  • ryuichifutamura

    Sep. 8, 2014
  • qunoster

    Aug. 18, 2014
  • shunsukeshimada3

    Mar. 28, 2014
  • kogorou

    Mar. 10, 2014

Google製JavaScriptフレームワークAngularJS(http://angularjs.org/)の良さを10分くらいで紹介するための資料です.身内向けの勉強会でしゃべるときに使いました. スライド中のサンプルコードはこちらに https://github.com/daisy1754/angular-simple-demo-flickr-cat

Views

Total views

4,853

On Slideshare

0

From embeds

0

Number of embeds

600

Actions

Downloads

22

Shares

0

Comments

0

Likes

10

×