狠狠撸

2014年6月8日
础苍驳耻濒补谤闯厂での非同期処理の话
AngularJS 勉強会 by 骋顿骋神戸

自己紹介
? おのうえ (@_likr)!
? 博士課程の大学院生!
? 可視化や最適化を使った意思決定支援に興味あり

Webと可視化
? Canvas、SVG、WebGLといったAPI、?
D3.js、Three.jsといったライブラリによって?
Web上での可視化基盤が整えられた
http://threejs.org/http://d3js.org/

础苍驳耻濒补谤闯厂でやってること

本セッションの内容
? JavaScriptには、HTTPアクセス、ファイルIO、?
アニメーションなど非同期処理がたくさん!
? 可視化のためのデータ取得も非同期処理！!
? 実アプリケーションには必要不可欠な非同期処理を?
AngularJSでどのように扱うのか様々な例を紹介

目次
1. 遅延処理 - $timeout!
2. HTTPアクセス - $http!
3. REST APIサーバーへのアクセス - ngResource!
4. Promiseを提供する - $q!
5. ngRouteとresolve

$timeout
? window.setTimeoutのラッパー!
? 指定した時間待った後処理を実行する!
? 使い方
https://docs.angularjs.org/api/ng/service/$timeout
$timeout(fn[, delay])
fn
delay 遅れさせる時間(ミリ秒)
実行する処理

$timeoutのサンプル
<div ng-app>
<div ng-controller="TimeoutExample">
<span>{{str}}</span>
<button ng-click="cancel()">Cancel</button>
</div>
</div>
function TimeoutExample($scope, $timeout) {
$scope.str = 'Prompt Result';
var promise = $timeout(function() {
$scope.str = prompt('Input Message');
}, 2000);
$scope.cancel = function() {
$timeout.cancel(promise);
$scope.str = 'Canceled';
};
}
http://js?ddle.net/likr/2NMyP/
$timeoutで、2秒後にプロンプトを?
表示して、入力をビューに表示する
$timeout.cancelに$timeoutの?
戻り値を渡すことで処理の中止
$timeoutを依存性注入する

setTimeoutじゃダメなの？
function TimeoutExample($scope) {
!
var timeoutId = setTimeout(function () {
}, 2000);
!
$scope.cancel = function () {
clearTimeout(timeoutId);
};
}
http://js?ddle.net/likr/243ja/

setTimeoutじゃダメなの？
!
}, 2000);
!
};
}
http://js?ddle.net/likr/243ja/
!
$scope.$apply(function () {
});
}, 2000);
!
};
}
データバインドを反映させるために$scope.$applyが必要
http://js?ddle.net/likr/243ja/2/

$timeoutとpromise
? Promise: 非同期処理をうまく扱うためのインタフェース!
!
!
!
!
? $timeoutはpromiseを返す
promise.catch(onRejected)
onFullfilled
onRejected 処理が失敗したときの処理
処理が成功した時の処理
promise.then(onFullfilled[, onRejected])

$timeoutとpromiseのサンプル
function TimeoutExample($scope, $timeout) {
$scope.status = 'Pending';
!
var promise = $timeout(function () {
}, 2000);
!
promise.then(function () {
$scope.status = 'Fullfilled';
});
promise.catch(function () {
$scope.status = 'Rejected';
});
!
$timeout.cancel(promise);
};
}
http://js?ddle.net/likr/2NMyP/1/
$timeoutのpromiseに成功時、?
失敗時のコールバックを登録

$http
? HTTPサーバーへとの通信を行う!
? GET / POST / PUT / DELETE / HEAD!
? JSONP!
? 使い方
https://docs.angularjs.org/api/ng/service/$http
$http.get(url[, config])
$http.post(url[, config])
…
$http(config)

$httpのサンプル
function HttpExample($scope, $http) {
$http.get('http://example.com/')
.then(function(response) {
$scope.data = response.data;
});
}
http://js?ddle.net/likr/ct6Jn/
$http({
method: 'get',
url: 'http://example.com/'
}).then(function(response) {
});
}
methodとurlを指定して$httpを呼び出す
$httpを依存性注入する
$httpはPromiseを返すのでthenで!
通信成功、失敗時の処理ができる
$http.getは$httpのショートカット

Response
? Promiseでresolveされるオブジェクトのプロパティ!
? data: Responseのbody!
? status: HTTPのステータスコード!
? headers: HTTPヘッダーのgetter!
? con?g: $httpの引数!
? statusText: HTTPのステータス文章

HttpPromise
? HttpPromise!
? $httpが返すPromise!
? thenの代わりにsuccessとerrorが使える
$http.get('http://gdgkobe-ng-guestbook.appspot.com/greetings')
.success(function(response) {
})
.error(function(reason) {
});
}

他のAJAX APIと比べて
? $scope.$applyの問題がない!
? $丑迟迟辫叠补肠办别苍诲によるテストが容易

ngResource
? REST APIサーバーとの通信を便利にするモジュール!
? REST APIサーバーの例
https://docs.angularjs.org/api/ngResource
Method URL 処理
GET http://example.com/greetings greeting
GET http://example.com/greetings/1 ID1
POST http://example.com/greetings 新しい
PUT http://example.com/greetings/1 ID1
DELETE http://example.com/greetings/1 ID1

ngResourceの利用
? AngularJS本体とは別jsファイルで提供されているので?
scriptタグを追加して読み込む!
!
? 依存モジュールとして指定
<script src=/slideshow/angularjs-35612212/35612212/"angular-resource.js"></script>
var app = angular.module('example', ['ngResource']);

Resourceの作成
? リソースのURLを指定してResourceを作成!
!
? factoryでserviceとして登録しておくと便利
$resource(‘http://example.com/greetings/:id')
app.factory('Greeting', function($resource) {
return $resource(‘http://example.com/greetings/:id');
});

Resourceの利用
? データ取得!
!
!
? データ保存
var Greeting = $resource('http://example.com/greetings/:id');
!
var greetings = Greeting.query();
var newGreeting = new Greeting();
newGreeting.content = 'hello';
newGreeting.$save();

Resourceの遅延処理
var app = angular.module('example', ['ngResource']);
!
app.factory('Greeting', function($resource) {
return $resource('http://gdgkobe-ng-guestbook.appsp
});
!
app.controller('Main', function(Greeting) {
var greetings = Greeting.query();
greetings.$promise
.then(function() {
console.log(greetings);
});
console.log(greetings);
});
Resourceのメソッドはプレースホルダーを?
返して、処理が完了した時点で内容を挿入する
http://js?ddle.net/likr/BHS5v/

ResourceとPromise
? 関数の結果の$promiseプロパティでPromiseを取得?
get()、query()、delete()、$save…
Greeting.query().$promise
.then(function(greetings) {
// TODO
});

Promiseを提供する
? $timeout、$http、ngResourceはプロミスで?
非同期処理を扱うことができる!
? 自分の非同期処理、非AngularJSの外部ライブラリを?
同様のAPIで提供する方法は？

$q
? Promiseの作成、ラップをする!
? $timeout、$http、ngResource内でも使用されている
https://docs.angularjs.org/api/ng/service/$q
$q.defer()
$q.when(promise)
$q.all(promises)

$q.defer
? Deferredオブジェクトを作成する!
!
? resolve、reject、notifyで非同期処理の状態を通知する!
!
!
? promiseプロパティでPromiseオブジェクトを取得する
deferred.resolve(value)
deferred.reject(reason)
deferred.notify(value)
var deferred = $q.defer()
var promise = deferred.promise;

$qのサンプル1
var app = angular.module('q-example', []);
!
app.factory('d3get', function($q) {
return function(xhr) {
var deferred = $q.defer();
xhr
.on('load', function(data) {
deferred.resolve(data);
})
.on('error', function(status) {
deferred.reject(status);
})
.get();
return deferred.promise;
};
})
!
app.controller('Main', function(d3get) {
d3get(d3.csv('http://example.com/data.csv'))
.then(function(data) {
// TODO
});
});
D3.jsのxhr系関数をラップしてみる
$q.deferでdeferredオブジェクトを作成
データ取得が成功したらresolve
promiseオブジェクトを返す
thenでデータ取得後の処理を行う
loadDataをラップした関数をfactoryで提供
データ取得が失敗したらreject

$qのサンプル2
function getData(url) {
return $.get(url);
}
!
!
function Main($q) {
$q.when(getData('http://example.com/'))
.then(function(data) {
// TODO
});
});
jQueryのAJAX関数をラップしてみる
AngularJSとは関係のない、
jQueryXHR(Promise)を返す関数
$q.whenでラップすると!
$scope.$applyの手間等が不要

問題
? 非同期処理が成功してからコントローラーの処理をし
たい場合!
? 認証、データ取得

ngRoute
? AngularJSのルーティングモジュール!
? コントローラーへの依存性注入で、コントローラー処
理に入る前にデータ取得などを済ませることができる!
? ui-routerでも同様
https://docs.angularjs.org/api/ngRoute

ngRouteのresolve
var app = angular.module('resolve-example', ['ngRoute']);
!
app.config(function($routeProvider) {
$routeProvider.when('/', {
template: '{{data}}',
controller: function($scope, response) {
},
resolve: {
response: function($http) {
return $http.get('http://example.com/');
}
}
});
});
resolveの要素がPromiseを返した場合、
全てのPromiseがresolveされてからコン
トローラーの処理を行う

まとめ
? AngularJSが提供する非同期処理APIを使うことで?
複雑な非同期処理も簡単に扱える!
? Promiseパターンで非同期処理を統一的に扱える!
? $qで自分で非同期処理を提供できる!
? AngularJS用じゃない非同期処理は、データバインド
に気をつける($q.when, $scope.$apply)

狠狠撸

础苍驳耻濒补谤闯厂での非同期処理の话

Recommended

More Related Content

What's hot (20)

Similar to 础苍驳耻濒补谤闯厂での非同期処理の话 (20)

More from Yosuke Onoue (18)

础苍驳耻濒补谤闯厂での非同期処理の话