このスライドは、以下のブログに記載のAngularJS上級編に 関するスライドです。 http://sub-labo.com/2014/07/06/angularjs-kotohajime/ スライドの内容は以下のとおりです。 非同期処理のハンドリング - $q HTMLの動的生成 - $compile ルーティング - $route

1. AngularJS上級編
by Shunta Saito @ Sub-Labo

2. 目次
• 非同期処理のハンドリング($q)
• HTMLの動的生成($compile)
• ルーティング($route)

3. 非同期処理のハンドリング($q)
• 非同期処理のハンドリング($q)とは、非同期処理の結果を他の処理を停止(ブロッ
ク)させずに取得し、結果に応じた処理を実行させるための仕組み
• 外部サービスから大量の情報を取得し表示したい場合や、初回のページ描画時に
表示されている必要はないが、情報が取得でき次第表示したい内容(広告など)を
表示する用途が向いています。
© 2014 Sub-Labo
メイン処理
非同期処理
ハンドラ
$q.defer()

4. 非同期処理のハンドリング($q)
のサンプル
$q.defer()からdeferred
(インスタンス)を取得し、
deferred.promiseを返却する
。(赤)
さらにdeferred.promise.thenの
第一引数にて、成功時のコール
バックを定義しておき(緑)、
deferred.resolve()を実行する事
で、成功時のコールバックを呼
び出す。(青)
© 2014 Sub-Labohttp://jsfiddle.net/subuta/mSnM6/

5. HTMLの動的生成($compile)
• HTMLの動的生成($compile)とは、ディレクティブ内でユーザの
入力などに応じてHTMLタグを動的に生成し、より自由なコーディングを
可能とするための仕組みです。
• jQueryでも同様の処理は実現出来ますが、より読みやすく簡潔な
コーディングが可能となります。
© 2014 Sub-Labo

6. HTMLの動的生成($compile)
- jQuery編
© 2014 Sub-Labohttp://jsfiddle.net/subuta/Em9Nd/
セレクトボックスの選択内容に
応じて、HTMLタグ(ラッパー)
を変更する。その後、現在の入
力値(_value)をもとにコンテナ
(#tag-container)内のHTMLを動
的に変更する。(赤)
インプットボックスの値
(_value)が変更された場合、
コンテナ(#tag-container)内の
HTMLを動的に変更する。(緑)

7. HTMLの動的生成($compile)
- jQuery編の補足
© 2014 Sub-Labohttp://jsfiddle.net/subuta/Em9Nd/
ちなみにこの方法だと、テキス
トボックス内にタグが入力され
るとそのまま評価されてしまい
ます。H1タグとか(赤)なら見た
目の問題で済みますが以下を入
力してみると。。。
<script>alert(“hello");</script>
!
よってこの方法の場合は、セキュ
リティの観点で対策が必要だと
いえます。
http://ja.wikipedia.org/wiki/クロスサイトスクリプティング

8. HTMLの動的生成($compile)
- AngularJS編
© 2014 Sub-Labohttp://jsfiddle.net/subuta/bqLkb/
セレクトボックスの選択内容に
応じて、HTMLタグ(ラッパー)
を変更する。その後、現在の
入力値(_value)をもとに
HTML(_html)を動的に変更す
る。(赤)
インプットボックスの値
(_value)が変更された場合、
HTML(_html)を動的に変更す
る。(緑)

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. ルーティング($route)
• ルーティング($route)とは、アドレスバーへの入力やリンクのクリックによる
URLの変更を検知し、URLに応じて適切なページの描画を行うための仕組みです。
• Webアプリケーションを作成する場合において、欠かせない概念の一つとなりま
す。
© 2014 Sub-Labo
“サイトについて”ページを表示
“ユーザホーム”ページを表示
“買い物カゴ”ページを表示

11. ルーティング($route)
のサンプル
© 2014 Sub-Labohttp://jsfiddle.net/subuta/awhx8/
$routeProviderのwhenメソッド
にURL(相対パス)とオブジェク
トを渡す事で、ルーティング設
定を行う。(赤)
リンクをクリックする事で、ア
ドレスが変わる(緑)と、それに
応じてng-viewタグの内容が変
わる。(青)
!
※サンプル(jsfiddle)では、アド
レスバーの表示はリンクをクリッ
クしても変わりませんが、実際
のアプリケーションでは変わり
ます。