このスライドは、以下のブログに記載のAngularJS中級編に 関するスライドです。 http://sub-labo.com/2014/07/06/angularjs-kotohajime/ スライドの内容は以下のとおりです。 変数のスコープ - $scope - $rootScope スケジューリング - タイマー($timeout) - インターバル($interval) HTTPリクエスト - $http - RESTプロトコル($resource) フィルタ - $filter

1. AngularJS中級編
by Shunta Saito @ Sub-Labo
!
編集履歴: 2014/7/27 一部の記載誤りを修正

2. 目次
!
• スコープ($scope/$rootScope)
• タイマー/インターバル($timeout/$interval)
• HTTPリクエスト/リソース($http/$resource)
• フィルタ($filter)
© 2014 Sub-Labo

3. スコープ($scope/$rootScope)
• スコープ($scope) = 変数のスコープ(有効範囲)
• コントローラやディレクティブなどで利用されます。スコープはそれぞれ独立しており、
スコープを利用することで、変数の利用範囲を明確にする事が出来ます。
• スコープは、コントローラとビューのどちらからでもアクセスできるため、
スコープのプロパティにモデルをセットすることで、データのやりとり(バインディング)を行います。
• $rootScopeは最上位のスコープとなり、すべてのコントローラ・ディレクティブからアクセスする事が可能です。
$rootScope
Controller
$scope
Controller
$scope
Directive
$scope
© 2014 Sub-Labo

4. スコープ($scope/$rootScope)
のサンプル - 前置き
AngularJSでは、右のよ
うに、ビュー内で2重の
波括弧{}を利用すること
で、$scope内の変数を参
照する事が出来ます
(赤)。また、ng-bind=“変
数名”とすることで、変数
を子要素の値として利用
する事もできます(青)。
© 2014 Sub-Labohttp://jsfiddle.net/subuta/g6mLj/

5. スコープ($scope/$rootScope)
のサンプル - 変数のスコープ
SampleCtrl(赤)と
OtherCtrl(緑)はどちらも
$scopeを利用している
が、別のインスタンスな
ため変数
($scope.something)は
共有されていない。
※OtherCtrl(緑)側は、変数
($scope.something)が未
定義なため、出力結果に
表示されていない。
© 2014 Sub-Labohttp://jsfiddle.net/subuta/g6mLj/

6. スコープ($scope/$rootScope)
のサンプル - $rootScope編
$rootScopeは
SampleCtrl(赤)と
OtherCtrl(緑)のどちらか
らも同一のインスタンス
を利用するため、変数
($rootScope.common)は
共有されている。
© 2014 Sub-Labohttp://jsfiddle.net/subuta/g6mLj/

7. スコープ($scope/$rootScope)
その他の機能
• $scope.$watch - 変数の変更を監視する機能
ビューにて、変数の値が変更された際の挙動(ハンドラ)を定義する事が出来ます。
• $scope.$on / $scope.$emit / $scope.$broadcast - $scope間でイベントをpub/subする機能
$scope.$onでイベントが発生した際の挙動(ハンドラ)を定義し、$scope.$emitもしくは
$scope.$broadcastにてイベントを発生させることで、DOMイベントのようなやりとりを行う事が出来ます。
© 2014 Sub-Labo
詳しくは以下の外部サイト(js STUDIO様)に
日本語記事があるので、参考にしてみてください。
http://js.studio-kingdom.com/angularjs/guide/scope

8. タイマー/インターバル
($timeout/$interval)
• どちらも、処理のスケジュール実行に関する機能です。
• $timeoutは処理の遅延実行(1度のみ)に利用されます。
• $intervalは処理の指定した間隔での、繰り返し実行に
利用されます。
© 2014 Sub-Labo

9. タイマー/インターバル
($timeout/$interval)のサンプル
© 2014 Sub-Labo
1秒(1,000ミリ秒)後に
onTimerを実行するように
スケジュール
1秒(1,000ミリ秒)間隔で
onIntervalを繰り返し実行
するようにスケジュール
http://jsfiddle.net/subuta/5EYLT/

10. タイマー/インターバル
($timeout/$interval)のおまけ
© 2014 Sub-Labo
つまり、前ページの実装は、以下の流れで実行されています。
※ちなみにonIntervalは、$interval.cancelでキャンセルしないと
呼び出されっぱなしなので、ご注意ください。
SampleCtrl
($timeout)
onTimer
($interval)
onInterval
Sample Ctrl [start]
Sample Ctrl [end]
timer is called!
interval is called ! @ 時間
interval is called ! @ 時間
…
ログ出力
1秒後 1秒間隔

11. • どちらも非同期にHTTPリクエストを行い、結果を取得するメソッドで
す。 jQueryでいう$.ajaxに相当します。
• $resourceの場合は、RESTに準拠した方法でリクエストを行います。
通常の$httpをより抽象化した呼び出しが可能となります。
© 2014 Sub-Labo
HTTPリクエスト/リソース
($http/$resource)
RESTについては、以下の外部サイト(RubyLife様)に
日本語記事があるので、参考にしてみてください。
※参照先はRailsでのREST APIの実装例となります。
http://www.rubylife.jp/rails/routing/index5.html

12. HTTPリクエスト/リソース
($http/$resource)のサンプル - $http編
右の実装では、Webサー
ビスのicndb(Internet
Chuck Noris DataBase)に
GETリクエストを行い
(青)、リクエストに成功
したら(緑)、$scopeの
joke変数に値をセットし
ています。
© 2014 Sub-Labo
http://jsfiddle.net/subuta/EuBQ3/
Thanks To → http://www.icndb.com/

13. HTTPリクエスト/リソース
($http/$resource)のサンプル - $resource編
右の実装では、Webサー
ビスのicndb(Internet
Chuck Noris DataBase)に
GETリクエストを行い、
リクエストに成功したら
(青)、$scopeのjokes変数
に値をセットしています。
© 2014 Sub-Labo
http://jsfiddle.net/subuta/4LCWC/
Thanks To → http://www.icndb.com/
resourceを使うためには、
ngResourceを読み込む。

14. フィルタ($filter)
• フィルタはモデルの値を、別の機能で利用しやすい形へ変換するための機能となります。
• AngularJSに標準で用意されているのは、主に以下のフィルタとなります。
• json - ObjectをJSON形式の文字列へ変換するフィルタ
• number - Numberを指定の桁数で丸めたテキストに変換するフィルタ
• orderBy - Objectの配列を指定のプロパティでソートした配列へ変換するフィルタ
• lowercase - Stringをすべて小文字に変換するフィルタ
• uppercase - Stringをすべて大文字に変換するフィルタ
• date - Dateを指定されたフォーマットの文字列に変換するフィルタ
© 2014 Sub-Labo

15. フィルタ($filter)のサンプル
http://jsfiddle.net/subuta/RHfPp/ © 2014 Sub-Labo
右の実装では、オブジェ
クト(灰)に対して、フィル
タを適用前/適用後でどの
ようになるかを示してい
ます。
!
以下のフィルタを利用し
ています。
・Dateフィルタ(赤)
・Stringフィルタ(青)
・orderByフィルタ(緑)