angularjs promises and chained .then deferred objects

http://stackoverflow.com/posts/27868388

by Garth Edwards

HTML

<script src="http://code.angularjs.org/1.3.5/angular.js"></script>
<div ng-app="myApp">
    <div ng-controller="Controller_1">
        myName :<br>
        {{myName}}<br>
        <br>
    </div>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('Controller_1', function($scope, myService) {
    
    var myName = "Ben";

    myService.slowService(myName)
    .then(function(result){myService.slowService2(result);})
    .then(function(result){myService.fastService(result);});

    $scope.myName = myName;
});

myApp.service('myService', function($q, $timeout) {

    this.slowService = function (name) {
		var deferred = $q.defer();
        console.log('Start of slowService1:', name, Date.now());
		
		$timeout(function() {
            name = 'Hello, ' + name + " is learning Angularjs";
            alert(name); 
            deferred.resolve(name);
    			console.log('End of slowService1 timeout:', name, Date.now());
        }, 1500);

        return deferred.promise;
	};
    
	this.slowService2 = function (name) {
		var deferred = $q.defer();
        console.log('Start of slowService2:', name, Date.now());
		
		$timeout(function() {
            name = 'Hello, ' + name + " is learning Angularjs";
            alert(name); 
            deferred.resolve(name);
    			console.log('End of slowService2 timeout:', name, Date.now());
        }, 1000);

        return deferred.promise;
	};

    this.fastService = function(name){ 
   		var deferred = $q.defer();
            console.log('Start of fastService:', name, Date.now());
        alert('Hello ' + name + ' - you are quick!'); 
        deferred.resolve();
            console.log('End of fastService:', name, Date.now());
        return deferred.promise;
    };
});