Typical asynchronous example

by jdmarshall

HTML

<script src="https://code.angularjs.org/1.2.12/angular.js"></script>
<div ng-controller="MyCtrl">
    <h2>Typical asynchronous example</h2>
    <div class="output">Output: {{output}}</div>
    <div class="input">
        <button ng-click='start()'>Start</button>
        <button ng-click='cancel()'>Cancel</button>
    </div>
</div>

CSS

body{
    padding: 10px;
}

.input, .output {
    padding: 10px;
}

.output {
    height: 20px;
}

JavaScript

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

function MyCtrl($scope, $q) {
    $scope.output = "";

    function asynchronousRequest() {
        var deferred = $q.defer();
        
        $scope.cancel = function() {
            deferred.reject("Error");
        };

        setTimeout(function() {
            deferred.resolve("Done!");
        }, 3000);

        return deferred.promise;
    }
    
    $scope.start = function() {
        $scope.output = "Loading...";

        asynchronousRequest().then(function(val) {
            $scope.output = val;
        }, function(message) {
            $scope.output = "Cancelled";
        });
    };
}