概要

非同期処理を記述するための優れたパターンがプロミスです。AngularJS における実装ではこちらの公式ページで紹介されている $q を利用します。

サンプルコード

<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <script src="angular.min.js"></script>
</head>
<body>

<div ng-controller="myController"></div>

<script>
 var app = angular.module('myApp', []);
 app.controller('myController', ['$scope', '$timeout', '$q', function($scope, $timeout, $q){

   function async() {
     var deferred = $q.defer();
     $timeout(function(){
       deferred.notify('START');
       if(true) {
         deferred.resolve('OK');
       }
       else {
         deferred.reject('NOT OK');
       }
     }, 1000); //msec
     return deferred.promise;
   }

   var promise = async();
   promise.then(function(msg){
     console.log('resolved, ' + msg);
   }, function(msg){
     console.log('rejected, ' + msg);
   }, function(msg){
     console.log('notified, ' + msg);
   }).finally(function(){
     console.log('finalize');
   });
 }]);
</script>

</body>
</html>

関連ページ

HTTP 通信 (AngularJS)

概要 AngularJS における HTTP 通信では、こちらのページに記載した XMLHttpRequest オブジェクトが利用されています。AngularJS で HTTP 通信を行うためのサンプルコードを以下に示します。公式ページはこちらです。 index.html <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <met

D3.js / v5 の基本的な使い方

概要データをもとにして DOM を操作する D3.js (Data-Driven Documents) の基本的な使い方を記載します。特にバージョンは v5 を対象とします。 Gallery D3 API Reference Hello world HTTP サーバ外部からデータを読み込むために CORS