AngularJS $q and promise

A simple demo for using $q

by ra2637

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <span>Without $q: I got cash {{getMoneyNoQ}}</span>
        <button ng-click="cashNoQ(100)">Cash $100</button>
        <br/>
        <span>With $q: I got cash {{getMoney}}</span>
        <button ng-click="cash(100)">Cash $100</button>
        <br/>
        <button ng-click="reset()">Reset</button>
    </div>
</div>

JavaScript

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

myApp.controller('MyCtrl', function($scope, $q, $timeout){
    var bankCashCheckNoQ = function(cash){
        var giveCash = 0;
        $timeout(function(){
            alert("Inventory Done！ From NoQ!");
            giveCash = cash;
        }, 1*1000);
        return giveCash;
    }
    $scope.getMoneyNoQ = "N/A";
    $scope.cashNoQ = function(cash){
        $scope.getMoneyNoQ = bankCashCheckNoQ(100);
    };
    
    var bankCashCheck = function(cash){
        var cashCheckJob = $q.defer();
        var promiseCard = cashCheckJob.promise;
        $timeout(function(){
            alert("Yes! We got it!");
            cashCheckJob.resolve(cash);
        }, 1*1000);
        return promiseCard;
    }
    $scope.getMoney = "N/A";
    $scope.cash = function(cash){
        bankCashCheck(100).then(function(getCash){
            $scope.getMoney = getCash;
        });
    };
    
    $scope.reset = function(){
        $scope.getMoneyNoQ = "N/A";
        $scope.getMoney = "N/A";
    };
    
});