angular-promises demo code + slides
parent
109fc8a98c
commit
e0c7b03933
@ -1,10 +1,84 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
angular.module('angularPromisesApp')
|
angular.module('angularPromisesApp')
|
||||||
.controller('MainCtrl', function ($scope) {
|
.controller('MainCtrl', function ($scope, $http, $q, $timeout) {
|
||||||
$scope.awesomeThings = [
|
|
||||||
'HTML5 Boilerplate',
|
|
||||||
'AngularJS',
|
$scope.timeout = 500 // timeout in ms for each request
|
||||||
'Karma'
|
|
||||||
];
|
|
||||||
|
$scope.loadData = function() {
|
||||||
|
$scope.result = null
|
||||||
|
|
||||||
|
$http.get('/api/ngparis/_all_docs', {
|
||||||
|
params: {include_docs: true},
|
||||||
|
timeout: $scope.timeout})
|
||||||
|
.success(function(result){ // .success = .then(onFulfilled)
|
||||||
|
$scope.result = result
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.loadDataWithFailOver = function() {
|
||||||
|
var requestTimeout = $scope.timeout;
|
||||||
|
var retries = 10;
|
||||||
|
|
||||||
|
var doRequest = function () {
|
||||||
|
var timedOut;
|
||||||
|
|
||||||
|
/*
|
||||||
|
This deferred will handle the timeout of requests
|
||||||
|
and notify the promise handlers
|
||||||
|
*/
|
||||||
|
var tryRequest = $q.defer();
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Timeout + retries of requests is actually processed here
|
||||||
|
with $timeout
|
||||||
|
*/
|
||||||
|
var timeout = $timeout(function(){
|
||||||
|
timedOut = true;
|
||||||
|
if (retries === 0) {
|
||||||
|
tryRequest.resolve('timeout')
|
||||||
|
console.log('timeout abort request');
|
||||||
|
} else {
|
||||||
|
console.log('trying new request')
|
||||||
|
retries--;
|
||||||
|
tryRequest.resolve('timeout')
|
||||||
|
doRequest();
|
||||||
|
}
|
||||||
|
// }, requestTimeout);
|
||||||
|
|
||||||
|
// Using exponential max timeout latency
|
||||||
|
}, Math.exp(requestTimeout/100));
|
||||||
|
requestTimeout += 50;
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
If the promise of the request is fulfilled or
|
||||||
|
failed, then cancel the timeout/retries processing
|
||||||
|
*/
|
||||||
|
tryRequest.promise.then(undefined, function(){
|
||||||
|
$timeout.cancel(timeout);
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
// The API call using $http
|
||||||
|
$http.get('/api/ngparis/_all_docs', {
|
||||||
|
params: {include_docs: true},
|
||||||
|
timeout: tryRequest.promise // A promise that will abort the request if resolved
|
||||||
|
}).success(function(result){
|
||||||
|
if (timedOut)
|
||||||
|
return;
|
||||||
|
else {
|
||||||
|
console.log('success')
|
||||||
|
tryRequest.reject('request success')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
doRequest();
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -1,36 +1,18 @@
|
|||||||
<div class="header">
|
<div class="header">
|
||||||
<ul class="nav nav-pills pull-right">
|
<h2 class="text-muted">Angular Promises</h2>
|
||||||
<li class="active"><a ng-href="#">Home</a></li>
|
|
||||||
<li><a ng-href="#">About</a></li>
|
|
||||||
<li><a ng-href="#">Contact</a></li>
|
|
||||||
</ul>
|
|
||||||
<h3 class="text-muted">angular promises</h3>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="jumbotron">
|
|
||||||
<h1>'Allo, 'Allo!</h1>
|
|
||||||
<p class="lead">
|
|
||||||
<img src="images/yeoman.png" alt="I'm Yeoman"><br>
|
|
||||||
Always a pleasure scaffolding your apps.
|
|
||||||
</p>
|
|
||||||
<p><a class="btn btn-lg btn-success" ng-href="#">Splendid!</a></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row marketing">
|
|
||||||
<h4>HTML5 Boilerplate</h4>
|
|
||||||
<p>
|
|
||||||
HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h4>Angular</h4>
|
<div>
|
||||||
<p>
|
<h2>API Call Result: </h2>
|
||||||
AngularJS is a toolset for building the framework most suited to your application development.
|
<button ng-click="loadData()">LoadData</button>
|
||||||
</p>
|
<button ng-click="loadDataWithFailOver()">LoadData With Failover</button>
|
||||||
|
<hr>
|
||||||
<h4>Karma</h4>
|
<br>
|
||||||
<p>Spectacular Test Runner for JavaScript.</p>
|
<table>
|
||||||
</div>
|
<tr ng-repeat="r in result.rows">
|
||||||
|
<td><h3>{{r.doc.title}}</h3></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
<div class="footer">
|
|
||||||
<p>♥ from the Yeoman team</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue