AngularJS : rendering data from a service through a custom directive with ControllerAs, bindToController and isolated scope syntax.

AngularJS : rendering data from a service through a custom directive with ControllerAs, bindToController and isolated scope syntax. Illustrating seperation of data collection through a 'factory' provider using the public GitHub API and rendering this data through a custom directive.

by Daan De Smedt

HTML

<!-- 
  AngularJS : rendering data from a service through a custom directive
  Remove the data or reload the data to trigger the directive $destroy listener
-->

<!-- application container -->
<div ng-app="app" ng-controller="BasicController as vm">

  <!-- directive view template -->
  <script type="text/ng-template" id="views/user/github/info.html">
    <div>
      <img width="40px" height="40px" ng-src="{{::vm.user.avatar_url}}" />
      <span style="float:right;">
          {{::vm.user.login}} 
          <span style="font-weight:bold;text-transform:uppercase;font-size:11px;color:gray;">
            | {{::vm.user.type}}
          </span>
      	<button ng-click="vm.alertURL()">Get GitHub URL</button>
      </span>
    </div>
  </script>

  <b>GITHUB PUBLIC USERS</b>
  <br/>
  <br/>
  <git-hub-user-info user="user" ng-repeat="user in vm.users track by $index"></git-hub-user-info>
  <br/>
  <br/>
  <button ng-click="vm.reloadUsers()">Reload data</button>
  <button ng-click="vm.removeUsers()">Remove data</button>
</div>

JavaScript

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

/* directive */
function gitHubUserInfo() {
  var directive = {
  	scope: {
    	user: "="
    },
    link: link,
    templateUrl: 'views/user/github/info.html',
    controller: GitHubDirectiveController,
    controllerAs: 'vm',
    bindToController: true,
    restrict: 'EA'
  };
  return directive;

  function link(scope, element, attrs) {
    /* add clean-up listeren */
    element.on('$destroy', function() {
      console.log('directive $destroy event listeren');
      scope.$destroy();
    });
  }

  function GitHubDirectiveController($scope) {
    var vm = this;
    vm.alertURL = alertURL;

		function alertURL() {
      alert($scope.vm.user.url);
    }
  }

}

/* controller */
function BasicController(githubDataService) {

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

  activate();

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

  function reloadUsers() {
    removeUsers();
    init();
  }

  function removeUsers() {
    vm.users = [];
  }

}

/* 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 getUsers! ' + error.data);
    }
  }

}