<!DOCTYPE html>
<html>
<head>
<script src="http://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body ng-app="myApp" ng-controller="MyController">
<h1>AngularJS Service with promises and notification</h1>
<h4>
Complete:
<span ng-class="complete ? 'done' : 'not-done'">
{{complete}}
</span>
</h4>
<div ng-repeat="item in items">
<div>{{item.name}}: {{item.role}}</div>
</div>
</body>
</html>
// Code goes here
var app = angular.module("myApp", []);
app.controller('MyController', ['$scope','myService', function($scope, myService) {
$scope.items = [];
$scope.complete = false;
//this is all you have to do to call a service...
myService.requestData().then(
function success() {
$scope.complete = true;
},
function failure() {
},
function notify(item){
$scope.items.push(item);
}
);
}]);
//quick mock of what the real operationService does. what's in here does not even matter.
app.factory("myService", ['$q','$interval',function ($q, $interval) {
var data = [
{name: "Superman", role: "hero", superpower:"fly", weakness:"Kryptonite"},
{name: "Darth Vador", role: "villain", superpower:"the force", weakness:"kids"},
{name: "Spiderman", role: "hero", superpower:"spider like", weakness:"girls"},
{name: "Ursula", role: "villain", superpower:"magic", weakness:"she's ugly"},
];
return {
requestData: function() {
var i = 0,
deferred = $q.defer();
$interval(function () {
deferred.notify(data[i]);
i++;
}, 500, data.length).then(
function () {
deferred.resolve('finished');
}
);
return deferred.promise;
}
};
}]);
.done{
color:green;
}
.not-done{
color:red;
}