Promises in Angular

Example of promises resolving at different times.

by Josh Carroll

HTML

<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-route.min.js"></script>
<div data-ng-controller="Ctrl as ctrl" class="container">
    <div class="row">
    <button type="button" data-ng-click="ctrl.trigger()">Trigger</button>
    </div>
    <div data-ng-repeat="msg in ctrl.messages" class="row" data-ng-class="ctrl.getColorClass(msg.val)" data-ng-mouseenter="ctrl.highlightAll(msg.val)" data-ng-mouseleave="ctrl.unHighlightAll(msg.val)">
        <div class="col-xs-5">
            Message: <span class="span2">{{msg.msg}}</span>
        </div>
        <div class="col-xs-7">
            <i data-ng-show="msg.highlight" class="pointer">&lt;---</i>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">Val: <span>{{val}}</span>

    </div>
</div>

CSS

.pointer {
    font-weight:bold;
    color:#000000;
}
.color0 {
    color:#A6CEE3;
}
.color1 {
    color:#1F78B4;
}
.color2 {
    color:#B2DF8A;
}
.color3 {
    color:#33A02C;
}
.color4 {
    color:#FB9A99;
}
.color5 {
    color:#E31A1C;
}
.color6 {
    color:#FDBF6F;
}
.color7 {
    color:#FF7F00;
}
.color8 {
    color:#CAB2D6;
}
.color9 {
    color:#6A3D9A;
}

JavaScript

var Controllers;
(function (Controllers) {

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    var Ctrl = function ($scope, $q, $timeout) {
        this.$scope = $scope;
        this.$q = $q;
        this.$timeout = $timeout;
        this.messages = [];
        this.$scope.val = 0;

        this.$scope.$watch('val', this.valChangedHandler.bind(this));
    };

    Ctrl.prototype.highlightAll = function (val) {
        for (var i = 0; i < this.messages.length; i++) {
            if (this.messages[i].val === val) {
                this.messages[i].highlight = true;
            }
        }
    };

    Ctrl.prototype.unHighlightAll = function (val) {
        for (var i = 0; i < this.messages.length; i++) {
            if (this.messages[i].val === val) {
                this.messages[i].highlight = false;
            }
        }
    };

    Ctrl.prototype.getColorClass = function (val) {
        return ["color" + (val % 10)];
    };

    Ctrl.prototype.valChangedHandler = function (newVal, oldVal) {
        var _this = this;

        _this.messages.push({
            val: newVal,
            msg: "Before Promise"
        });

        var promise = _this.doWork("First Message");

        promise.then(this.addMessageAndSend.bind(this, newVal, "Second Message")).then(this.addMessageAndSend.bind(this, newVal, "Third Message")).then(this.addMessageAndSend.bind(this, newVal));

        _this.messages.push({
            val: newVal,
            msg: "After Promise"
        });
    };

    Ctrl.prototype.addMessageAndSend = function (val, newMessage, msg) {
        terminate = angular.isUndefined(msg);

        this.messages.push({
            val: val,
            msg: terminate ? newMessage : msg
        });

        if (!terminate) {
            return this.doWork(newMessage);
        }
    };

    Ctrl.prototype.trigger = function () {
        this.$scope.val += 1;
    };

    Ctrl.prototype.doWork = function...