Promises - Angular

by wimpyprogrammer

HTML

<script src="https://code.angularjs.org/1.4.8/angular-sanitize.min.js"></script>
<div ng-controller="myCtrl" id="result" ng-bind-html="output.result"></div>

CSS

#result {
  font-size: x-large;
  padding: 1em;
}

JavaScript

angular.module('myApp', ['ngSanitize'])
	.controller('myCtrl', function($scope, $http, $q, $httpParamSerializerJQLike) {
    $scope.output = { result: 'Start<br/>' };
    
    function write(text) {
    	$scope.output.result += text + '<br/><hr/>';
    }
  
		var getProduct = function(productId) {
      if (!productId) {
        // 1. Always return a Promise
        return $q.resolve(null);
      }

      var url = '/echo/json/';
      var mock = { name: 'Widget', price: productId };
      var data = { json: JSON.stringify(mock) };

      return $http.post(url, $httpParamSerializerJQLike(data), {
      	headers: {'Content-Type': 'application/x-www-form-urlencoded'}
      });
    };
  
    // 2. Beware of custom Promise methods!
    getProduct()
      .success(function(res) { write('success ' + JSON.stringify(res)); })
      .error(function(res) { write('error ' + JSON.stringify(res)); });

    getProduct()
      .then(function(res) { write('then ' + JSON.stringify(res)); })
      ['catch'](function (res) { write('catch ' + JSON.stringify(res)); });
});