Promises explained | GETting progress

by riddla

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-mocks.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.min.js"></script>
<div ng-app="promisesApp">
    <div ng-controller="PromisesCtrl">
        <h2>Hi, I'm a promise and my state is <span ng-class="{'text-muted': promiseStateIs('undefined'), 'text-info': promiseStateIs('pending'), 'text-success': promiseStateIs('resolved')}">{{state()}}</span>.</h2>
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="00" aria-valuemin="0" aria-valuemax="100" ng-style="myStyle"></div>
        </div>
        
        <dl class="dl-horizontal">
            <dt ng-show="promiseStateIs('undefined')"><pre>{{dumbMethodCode('startPromise')}}</pre></dt>
            <dd><button class="btn btn-default" ng-click="startPromise()" ng-disabled="promiseIsStarted()">Start Promise</button></dd>
            <dt ng-show="promiseStateIs('undefined')"><pre>{{dumbMethodCode('startPromise')}}</pre></dt>
            <dd><button class="btn btn-default" ng-click="startProgress()" ng-disabled="promiseIsStarted()">Start Progress</button></dd>
        </dl>
        <dl class="dl-horizontal" ng-hide="promiseStateIs('undefined')">
            <dt>
                <pre>dfd progress = {{progress}}</pre>
                <blockquote>The deferred.notify() Deferred method, calls any progressCallbacks on a Deferred object, optionally passing arguments.</blockquote>
                <pre>{{dumbMethodCode('progressPromise')}}</pre>
                            
                <pre>{{dumbMethodCode('bindProgress')}}</pre>
            </dt>
            <dd><button class="btn btn-default" ng-click="progressPromise()">Progress Promise</button></dd>
        </dl>
    </div>
</div>

CSS

.form-control { width:20%; }

JavaScript

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

var i = 0;

angular.module('promisesApp')
    .config(function($provide) {
        $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
    })
    .run(function($httpBackend) {
        $httpBackend.whenGET('/progressEndPoint').respond(function(method, url, data) {
            i += _.random(1, 10);;
            //debugger;
            
            return [200, i, {}];
        });
    });

promisesApp.controller('PromisesCtrl', function PromisesCtrl($scope, $timeout, $interval, $http) {
    
    var ProgressIntervall;
    
    function getProgress() {
        $http.get('/progressEndPoint').then(function(response) {
            debugger;
            $scope.progressPromise(response.data);
            if ($scope.progress >= 100) {
                $interval.cancel(ProgressIntervall);
                $scope.resolveDfd();
            }
        }, function(error) {
             debugger;  
        });
    }
    
    $scope.startProgress = function() {
        $scope.startPromise();
        ProgressIntervall = $interval(getProgress, 1000);
        return true;
    };
    
    $scope.progress = 0;

    $scope.myStyle = {};
    
    $scope.foo = function() {
        return true;
    };

    $scope.dumbMethodCode = function(method) {
        return $scope[method].toString();
    };

    $scope.promiseState = function() {
        return $scope.myPromise.state();
    };

    $scope.promiseStateIs = function(what) {
        if (typeof $scope.myPromise === 'undefined') {
             return what === 'undefined';   
        }
        return $scope.myPromise.state() === what;
    };

    $scope.promiseIsUndefined = function() {
        return typeof $scope.myPromise === 'undefined';
    };

    $scope.startPromise = function() {
        $scope.myPromise = $.Deferred();
        
        $scope.bindProgress();
    };
     $scope.promiseIsStarted = function() {
        return !...