Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 6, 2015 12:00
Show Gist options
  • Save anonymous/8f811a83eaddf50a973c to your computer and use it in GitHub Desktop.
Save anonymous/8f811a83eaddf50a973c to your computer and use it in GitHub Desktop.
Download ZIP
Angular Promises Example Angular Promises Example // source http://jsbin.com/yiqahe
Raw
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta name="description" content="Angular Promises Example">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8">
<title>Angular Promises Example</title>
</head>
<body ng-controller="MessageCtrl">
<h1>Angular Promises Example</h1>
<h3>Click to resolve promise</h3>
<ul>
<li><button ng-click="resolve1(100)">Resolve 1</button></li>
<li><button ng-click="resolve2(100)">Resolve 2</button></li>
<li><button ng-click="resolve3(100)">Resolve 3</button></li>
</ul>
<ul ng-repeat="msg in notifications">
<li>
<h3>Notification: {{ msg }}</h3>
</li>
</ul>
<hr>
<h3>Promises resolved automatically</h3>
<ul ng-repeat="msg in messages">
<li>
<p>{{ msg }}</p>
</li>
</ul>
<script id="jsbin-javascript">
var app = angular.module('app', []);
app.controller('MessageCtrl', function($scope, $log, $timeout, $q) {
$scope.messages = [];
$scope.notifications = [];
$scope.asyncAjax = function(data) {
var defer = $q.defer();
$timeout(function() {
defer.resolve();
}, data);
return defer.promise;
};
// make the Ajax async requests
var promise1 = $scope.asyncAjax(5000);
var promise2 = $scope.asyncAjax(18000);
var promise3 = $scope.asyncAjax(12000);
// wait for promises to resolve
promise1.then(function() {
$scope.messages.push('promise1 resolved at ' + new Date().toISOString());
});
promise2.then(function() {
$scope.messages.push('promise2 resolved at ' + new Date().toISOString());
});
promise3.then(function() {
$scope.messages.push('promise3 resolved at ' + new Date().toISOString());
});
// wait until all promises are resolved
var waitForAll = $q.all([promise1, promise2, promise3]);
// once all the promises are resolved, notify user
waitForAll.then(function() {
$scope.messages.push('All promises have been resolved!');
});
// generate async request on click with promise
$scope.resolve1 = function(data) {
var p1 = $scope.asyncAjax(data);
p1.then(function() {
$scope.notifications.push('promise 1 resolved');
});
};
$scope.resolve2 = function(data) {
var p2 = $scope.asyncAjax(data);
p2.then(function() {
$scope.notifications.push('promise 2 resolved');
});
};
$scope.resolve3 = function(data) {
var p3 = $scope.asyncAjax(data);
p3.then(function() {
$scope.notifications.push('promise 3 resolved');
r3 = p3;
});
};
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('app', []);
app.controller('MessageCtrl', function($scope, $log, $timeout, $q) {
$scope.messages = [];
$scope.notifications = [];
$scope.asyncAjax = function(data) {
var defer = $q.defer();
$timeout(function() {
defer.resolve();
}, data);
return defer.promise;
};
// make the Ajax async requests
var promise1 = $scope.asyncAjax(5000);
var promise2 = $scope.asyncAjax(18000);
var promise3 = $scope.asyncAjax(12000);
// wait for promises to resolve
promise1.then(function() {
$scope.messages.push('promise1 resolved at ' + new Date().toISOString());
});
promise2.then(function() {
$scope.messages.push('promise2 resolved at ' + new Date().toISOString());
});
promise3.then(function() {
$scope.messages.push('promise3 resolved at ' + new Date().toISOString());
});
// wait until all promises are resolved
var waitForAll = $q.all([promise1, promise2, promise3]);
// once all the promises are resolved, notify user
waitForAll.then(function() {
$scope.messages.push('All promises have been resolved!');
});
// generate async request on click with promise
$scope.resolve1 = function(data) {
var p1 = $scope.asyncAjax(data);
p1.then(function() {
$scope.notifications.push('promise 1 resolved');
});
};
$scope.resolve2 = function(data) {
var p2 = $scope.asyncAjax(data);
p2.then(function() {
$scope.notifications.push('promise 2 resolved');
});
};
$scope.resolve3 = function(data) {
var p3 = $scope.asyncAjax(data);
p3.then(function() {
$scope.notifications.push('promise 3 resolved');
r3 = p3;
});
};
});</script></body>
</html>
Raw
jsbin.yiqahe.js
var app = angular.module('app', []);
app.controller('MessageCtrl', function($scope, $log, $timeout, $q) {
$scope.messages = [];
$scope.notifications = [];
$scope.asyncAjax = function(data) {
var defer = $q.defer();
$timeout(function() {
defer.resolve();
}, data);
return defer.promise;
};
// make the Ajax async requests
var promise1 = $scope.asyncAjax(5000);
var promise2 = $scope.asyncAjax(18000);
var promise3 = $scope.asyncAjax(12000);
// wait for promises to resolve
promise1.then(function() {
$scope.messages.push('promise1 resolved at ' + new Date().toISOString());
});
promise2.then(function() {
$scope.messages.push('promise2 resolved at ' + new Date().toISOString());
});
promise3.then(function() {
$scope.messages.push('promise3 resolved at ' + new Date().toISOString());
});
// wait until all promises are resolved
var waitForAll = $q.all([promise1, promise2, promise3]);
// once all the promises are resolved, notify user
waitForAll.then(function() {
$scope.messages.push('All promises have been resolved!');
});
// generate async request on click with promise
$scope.resolve1 = function(data) {
var p1 = $scope.asyncAjax(data);
p1.then(function() {
$scope.notifications.push('promise 1 resolved');
});
};
$scope.resolve2 = function(data) {
var p2 = $scope.asyncAjax(data);
p2.then(function() {
$scope.notifications.push('promise 2 resolved');
});
};
$scope.resolve3 = function(data) {
var p3 = $scope.asyncAjax(data);
p3.then(function() {
$scope.notifications.push('promise 3 resolved');
r3 = p3;
});
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment