Angular Promises

by dirtyd77

HTML

<script src="https://rawgit.com/lodash/lodash/2.4.1/dist/lodash.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="myApp"
     ng-controller="AppCtrl as vm">
         
         
         <p>{{ vm.result }}</p>
</div>

CSS

html, body {
    height:100%;
    width:100%;
}
p {
   
}

JavaScript

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

app.controller('AppCtrl', AppCtrl);

AppCtrl.$inject = ['$scope', 'listService'];

function AppCtrl($scope, listService) {
    var vm = this;
    
    listService.getList().then(function (data){
        vm.result = data;
    });
    
    setTimeout(function (){
        debugger;
        listService.getList().then(function (data){
            console.log(data);
            vm.result = data;
            $scope.$digest();
        });
    }, 3000);
};


app.factory('listService', listService);

listService.$inject = ['$q'];

function listService ($q) {

    var cache = null;
    
    function getList(){
        var deferred = $q.defer(),
            promises = {
            foo: getEverything(),
            bar: isAwesome()
        };
        
        cache ? 
            $q.when(cache) :
            $q.all(promises).then(function (data){
                cache = angular.copy(data);
                cache.foo = 'cachedBrah';
                deferred.resolve(data);
            });
        
        return deferred.promise;
    };
    
    function getEverything (){
        var deferred = $q.defer();
        
        setTimeout(function (){
            deferred.resolve('everything');
        }, 1000);
        
        return deferred.promise;
    };
    
    function isAwesome (){
        var deferred = $q.defer();
        
        setTimeout(function (){
            deferred.resolve('is awesome');
        }, 100);
        
        return deferred.promise;
    };
    
    return {
        getList: getList  
    };
}