Movatterモバイル変換

2014年6月8日AngularJSでの非同期処理の話AngularJS 勉強会 by GDG神戸

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

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

AngularJSでやってること

本セッションの内容✤ 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])fndelay 遅れさせる時間(ミリ秒)実行する処理

$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) {$scope.str = 'Prompt Result';!var timeoutId = setTimeout(function () {$scope.str = prompt('Input Message');}, 2000);!$scope.cancel = function () {clearTimeout(timeoutId);$scope.str = 'Canceled';};}http://jsﬁddle.net/likr/243ja/

setTimeoutじゃダメなの？function TimeoutExample($scope) {$scope.str = 'Prompt Result';!var timeoutId = setTimeout(function () {$scope.str = prompt('Input Message');}, 2000);!$scope.cancel = function () {clearTimeout(timeoutId);$scope.str = 'Canceled';};}http://jsﬁddle.net/likr/243ja/function TimeoutExample($scope) {$scope.str = 'Prompt Result';!var timeoutId = setTimeout(function () {$scope.$apply(function () {$scope.str = prompt('Input Message');});}, 2000);!$scope.cancel = function () {clearTimeout(timeoutId);$scope.str = 'Canceled';};}データバインドを反映させるために$scope.$applyが必要http://jsﬁddle.net/likr/243ja/2/

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

$timeoutとpromiseのサンプルfunction TimeoutExample($scope, $timeout) {$scope.str = 'Prompt Result';$scope.status = 'Pending';!var promise = $timeout(function () {$scope.str = prompt('Input Message');}, 2000);!promise.then(function () {$scope.status = 'Fullfilled';});promise.catch(function () {$scope.status = 'Rejected';});!$scope.cancel = function () {$timeout.cancel(promise);$scope.str = 'Canceled';};}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/function HttpExample($scope, $http) {$http({method: 'get',url: 'http://example.com/'}).then(function(response) {$scope.data = response.data;});}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が使えるfunction HttpExample($scope, $http) {$http.get('http://gdgkobe-ng-guestbook.appspot.com/greetings').success(function(response) {$scope.data = response.data;}).error(function(reason) {});}

他のAJAX APIと比べて✤ $scope.$applyの問題がない!✤ $httpBackendによるテストが容易

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

ngResourceの利用✤ AngularJS本体とは別jsファイルで提供されているので scriptタグを追加して読み込む!!✤ 依存モジュールとして指定<script src="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のサンプル1var 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オブジェクトを作成データ取得が成功したらresolvepromiseオブジェクトを返すthenでデータ取得後の処理を行うloadDataをラップした関数をfactoryで提供データ取得が失敗したらreject

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

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

Movatterモバイル変換

Change Language

AngularJSでの非同期処理の話

Embed presentation

Recommended

More Related Content

What's hot

Similar to AngularJSでの非同期処理の話

More from Yosuke Onoue

AngularJSでの非同期処理の話