AngularJS上級編
by Shunta Saito @ Sub-Labo
目次
• 非同期処理のハンドリング($q)
• HTMLの動的生成($compile)
• ルーティング($route)
非同期処理のハンドリング($q)
• 非同期処理のハンドリング($q)とは、非同期処理の結果を他の処理を停止(ブロッ
ク)させずに取得し、結果に応じた処理を実行させるための仕組み
• 外部サービスから大量の情報を取得し表示したい場合や、初回のペ...
非同期処理のハンドリング($q)
のサンプル
$q.defer()からdeferred
(インスタンス)を取得し、
deferred.promiseを返却する
。(赤)
さらにdeferred.promise.thenの
第一引数にて、成功時の...
HTMLの動的生成($compile)
• HTMLの動的生成($compile)とは、ディレクティブ内でユーザの
入力などに応じてHTMLタグを動的に生成し、より自由なコーディングを
可能とするための仕組みです。
• jQueryでも同様の処...
HTMLの動的生成($compile)
- jQuery編
© 2014 Sub-Labohttp://jsfiddle.net/subuta/Em9Nd/
セレクトボックスの選択内容に
応じて、HTMLタグ(ラッパー)
を変更する。その後、現在...
HTMLの動的生成($compile)
- jQuery編の補足
© 2014 Sub-Labohttp://jsfiddle.net/subuta/Em9Nd/
ちなみにこの方法だと、テキス
トボックス内にタグが入力され
るとそのまま評価されて...
HTMLの動的生成($compile)
- AngularJS編
© 2014 Sub-Labohttp://jsfiddle.net/subuta/bqLkb/
セレクトボックスの選択内容に
応じて、HTMLタグ(ラッパー)
を変更する。その後...
HTMLの動的生成($compile)
- AngularJS編の補足
© 2014 Sub-Labohttp://jsfiddle.net/subuta/bqLkb/
AngularJSの場合は以下(赤)を
入力しても実行されません。
<scr...
ルーティング($route)
• ルーティング($route)とは、アドレスバーへの入力やリンクのクリックによる
URLの変更を検知し、URLに応じて適切なページの描画を行うための仕組みです。
• Webアプリケーションを作成する場合において、...
ルーティング($route)
のサンプル
© 2014 Sub-Labohttp://jsfiddle.net/subuta/awhx8/
$routeProviderのwhenメソッド
にURL(相対パス)とオブジェク
トを渡す事で、ルーティン...
Upcoming SlideShare
Loading in...5
×

AngularJS上級編

1,262

Published on

このスライドは、以下のブログに記載のAngularJS上級編に
関するスライドです。
http://sub-labo.com/2014/07/06/angularjs-kotohajime/

スライドの内容は以下のとおりです。

非同期処理のハンドリング
- $q
HTMLの動的生成
- $compile
ルーティング
- $route

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,262
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
18
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

AngularJS上級編

  1. 1. AngularJS上級編 by Shunta Saito @ Sub-Labo
  2. 2. 目次 • 非同期処理のハンドリング($q) • HTMLの動的生成($compile) • ルーティング($route)
  3. 3. 非同期処理のハンドリング($q) • 非同期処理のハンドリング($q)とは、非同期処理の結果を他の処理を停止(ブロッ ク)させずに取得し、結果に応じた処理を実行させるための仕組み • 外部サービスから大量の情報を取得し表示したい場合や、初回のページ描画時に  表示されている必要はないが、情報が取得でき次第表示したい内容(広告など)を  表示する用途が向いています。 © 2014 Sub-Labo メイン処理 非同期処理 ハンドラ $q.defer()
  4. 4. 非同期処理のハンドリング($q) のサンプル $q.defer()からdeferred (インスタンス)を取得し、 deferred.promiseを返却する 。(赤) さらにdeferred.promise.thenの 第一引数にて、成功時のコール バックを定義しておき(緑)、 deferred.resolve()を実行する事 で、成功時のコールバックを呼 び出す。(青) © 2014 Sub-Labohttp://jsfiddle.net/subuta/mSnM6/
  5. 5. HTMLの動的生成($compile) • HTMLの動的生成($compile)とは、ディレクティブ内でユーザの 入力などに応じてHTMLタグを動的に生成し、より自由なコーディングを 可能とするための仕組みです。 • jQueryでも同様の処理は実現出来ますが、より読みやすく簡潔な     コーディングが可能となります。 © 2014 Sub-Labo
  6. 6. HTMLの動的生成($compile) - jQuery編 © 2014 Sub-Labohttp://jsfiddle.net/subuta/Em9Nd/ セレクトボックスの選択内容に 応じて、HTMLタグ(ラッパー) を変更する。その後、現在の入 力値(_value)をもとにコンテナ (#tag-container)内のHTMLを動 的に変更する。(赤) インプットボックスの値 (_value)が変更された場合、 コンテナ(#tag-container)内の HTMLを動的に変更する。(緑)
  7. 7. HTMLの動的生成($compile) - jQuery編の補足 © 2014 Sub-Labohttp://jsfiddle.net/subuta/Em9Nd/ ちなみにこの方法だと、テキス トボックス内にタグが入力され るとそのまま評価されてしまい ます。H1タグとか(赤)なら見た 目の問題で済みますが以下を入 力してみると。。。 <script>alert(“hello");</script> ! よってこの方法の場合は、セキュ リティの観点で対策が必要だと いえます。 http://ja.wikipedia.org/wiki/クロスサイトスクリプティング
  8. 8. HTMLの動的生成($compile) - AngularJS編 © 2014 Sub-Labohttp://jsfiddle.net/subuta/bqLkb/ セレクトボックスの選択内容に 応じて、HTMLタグ(ラッパー) を変更する。その後、現在の 入力値(_value)をもとに HTML(_html)を動的に変更す る。(赤) インプットボックスの値 (_value)が変更された場合、 HTML(_html)を動的に変更す る。(緑)
  9. 9. HTMLの動的生成($compile) - AngularJS編の補足 © 2014 Sub-Labohttp://jsfiddle.net/subuta/bqLkb/ AngularJSの場合は以下(赤)を 入力しても実行されません。 <script>alert(“hello");</script> ! これは$sanitizeというモジュー ルによって、危険なHTMLタグ が無毒化(sanitize)されてから表 示されるように設計されている ためです。 https://docs.angularjs.org/api/ngSanitize/service/$sanitize
  10. 10. ルーティング($route) • ルーティング($route)とは、アドレスバーへの入力やリンクのクリックによる URLの変更を検知し、URLに応じて適切なページの描画を行うための仕組みです。 • Webアプリケーションを作成する場合において、欠かせない概念の一つとなりま す。 © 2014 Sub-Labo “サイトについて”ページを表示 “ユーザホーム”ページを表示 “買い物カゴ”ページを表示
  11. 11. ルーティング($route) のサンプル © 2014 Sub-Labohttp://jsfiddle.net/subuta/awhx8/ $routeProviderのwhenメソッド にURL(相対パス)とオブジェク トを渡す事で、ルーティング設 定を行う。(赤) リンクをクリックする事で、ア ドレスが変わる(緑)と、それに 応じてng-viewタグの内容が変 わる。(青) ! ※サンプル(jsfiddle)では、アド レスバーの表示はリンクをクリッ クしても変わりませんが、実際 のアプリケーションでは変わり ます。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×