<!DOCTYPE html>
<html>

  <head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" data-semver="3.1.1" data-require="bootstrap-css@3.1.*" />
    <script data-require="angular.js@1.2.*" data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js" data-semver="0.12.0" data-require="ui-bootstrap@0.12.0"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-app="promiseApp" ng-controller="promiseCtrl">
    <h1>Promises Demo</h1>
    <h2>Loaded: {{ loaded }}</h2>
    <div ng-style="progressStyle" class="progress"></div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4 col-sm-4 col-xs-4" ng-repeat="image in loadedImages">
                <img class="img-thumbnail" ng-src="{{image.src}}"/>
            </div>
        </div>
    </div>
  </body>

</html>
angular.module('promiseApp', []);

angular.module('promiseApp').controller('promiseCtrl', function($scope, $q, $timeout, $log) {
    var baseurl = "http://www.jeremyzerr.com/sites/default/files/";
    var imageSources = [
        "15011952803_ccbdb49ae8_q.jpg",
        "15652004182_3c0f899724_q.jpg",
        "15764391618_c3f0849cd2_q.jpg",
        "15787684433_bdc34f7427_q.jpg",
        "15925538856_87eff69668_q.jpg",
        "15940041135_2fc9fc073b_q.jpg",
        "15942477302_de8ba5a995_q.jpg",
        "16207743157_2566da4142_q.jpg",
        "16384855106_5a99c95c52_q.jpg"
        ];
        
    $scope.loadedImages = [];
    $scope.totalImages = imageSources.length;
    $scope.loaded = 0;
    
    var randomDelay = function() {
        return Math.floor((Math.random() * 4000) + 1);
    };
    
    var doneLoading = function(deferred, image) {
        return function() {
            $timeout(function() {
                deferred.resolve(image);    
            }, randomDelay());
            
        };
    };
    
    var loadImages = function() {
        // we are going to wait for all promises
        var promiseArray = [];
        // load images into Image object and wait
        for (var i=0; i<imageSources.length; i++) {
            // initialize deferred object
            var deferred = $q.defer();
            // load image URL into Image object
            var image = new Image();
            image.onload = doneLoading(deferred, image);
            image.src = baseurl + imageSources[i];
            // action when promise resolves
            deferred.promise.then(function() {
                $scope.loaded++;
            });
            promiseArray.push(deferred.promise);
        }
        // use $q.all to wait for all to be done
        $q.all(promiseArray).then(
            function success(resultArray) {
                $scope.loadedImages = resultArray;
            },
            function error(errorArray) {
                // handle errors here
            }
        );
    };
    
    loadImages();
    
    /**
     * Progress-related functions
     */
    var computeProgressStyle = function() {
        var pct = 100 * $scope.loaded / $scope.totalImages;
        var pctString = pct.toString() + "%";
        return {
            width: pctString
        };
    };
    // update style that sizes progress bar
    $scope.$watch('loaded', function(newV, oldV) {
        $scope.progressStyle = computeProgressStyle();
    });    
    
});
.progress {
    height: 20px;
    background-color: #000077;
}

.progress-done {
    background-color: #0000dd;
}
# AngularJS Promises Demo

The purpose of this demo is to show how to use AngularJS promises by using them to preload images, showing progress as they are loaded, and displaying them all when complete.