AngularJS : seperation of data to a data service using a controller activate function

AngularJS : seperation of data to a data service using a controller activate function

by Daan De Smedt

HTML

<div ng-app="app" ng-controller="BasicController as vm">
  <b>GITHUB PUBLIC USERS</b>
  <br/>
  <br/>
  <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>
</div>

JavaScript

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

/* controller */
function BasicController(githubDataService) {

  var vm = this;
  vm.users = [];

  activate();

  function activate() {
    return githubDataService.getUsers()
      .then(function(data) {
        vm.users = data;
      });
  }

}

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

  function getUsers() {
    return $http.get('https://api.github.com/users')
      .then(getUsersComplete)
      .catch(getUsersFailed);

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

    function getUsersFailed(error) {
      console.log('XHR Failed for getAvengers.' + error.data);
    }
  }

}