AngularJS : catch exceptions with promises within a provider function

AngularJS : catch exceptions with promises within a provider function. Upon exception catch the promise is chained back to the view to be shown to the user.

by Daan De Smedt

HTML

<div ng-app="app" ng-controller="BasicController as vm">
  <b>GITHUB PUBLIC USERS</b>
  <br/>
  <br/>
  <div ng-if="vm.error.show">
    {{::vm.error.message}}
  </div>
  <div ng-repeat="user in vm.users track by $index">
    <img width="40px" height="40px" ng-src="{{user.avatar_url}}" />
    <span style="float:right;">
      {{::user.login}} 
      <span style="font-weight:bold;text-transform:uppercase;font-size:11px;color:gray;">
        | {{::user.type}}
      </span>
    </span>
  </div>
  <br/>
  <button ng-click="vm.getUsers()">Reload data</button>
</div>

JavaScript

angular
  .module('app', [])
  .factory('githubDataService', githubDataService)
  .controller('BasicController', BasicController)

/* controller */
function BasicController(githubDataService) {

  var vm = this;
  vm.users = [];
  vm.getUsers = activate;
  vm.error = {
    show: false,
    error: ''
  }

  activate();

  function activate() {
    hideError();
    return githubDataService.getUsers()
      .then(function(data) {
        vm.users = data;
      }).catch(function(error) {
        vm.error = {
          show: true,
          message: error
        };
      });
  }

  function hideError() {
    vm.error.show = false;
  }

}

/* service */
function githubDataService($http, $q) {
  return {
    getUsers: getUsers
  };

  function getUsers() {
    // falty defines API url to illustrate the 'catch'
    return $http.get('https://api.github.com/userss')
      .then(getUsersComplete)
      .catch(getUsersFailed);

    function getUsersComplete(response) {
      return response.data;
    }

    function getUsersFailed(error) {
      console.log('XHR Failed for getUsersFailed. Error : ' + error.data);
      return $q.reject('XHR Failed for getUsersFailed. Error : ' + error.data);
    }
  }

}