AngularJS Example:
by Ztyx
HTML
<div ng-app="telavox.test">
<div data-ng-controller="MyTestController">
<p class="error" data-ng-show="error" data-ng-bind="error">
</p>
<p data-ng-repeat="item in mylist" data-ng-bind="item">
</p>
</div>
</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<style>
.error {
color: red;
}
}
JavaScript
angular.module('telavox.test', [])
.factory('MySimulatedSlowHTTPService', function($q, $timeout) {
var deferred = $q.defer();
$timeout(function() {
// Simulated slow fetch from an HTTP server
deferred.reject("Could not fetch the list :-(")
}, 3000);
return deferred.promise;
})
.controller('MyTestController', function($scope, MySimulatedSlowHTTPService) {
MySimulatedSlowHTTPService.then(function(mylist) {
$scope.mylist = mylist;
}, function(error) {
$scope.error = error;
$scope.mylist = [];
});
});