AngularJS : get IP GEO location information

AngularJS : get IP GEO location information

by Daan De Smedt

HTML

<!-- 
  AngularJS : get IP GEO location information
  http://creative-geeks.com
  IP GEO LOCATION API : http://ip-api.com/json
-->

<!-- 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="{{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>
  </script>

  <b>GITHUB PUBLIC USERS</b>
  <br/>
  <br/>
  <git-hub-user-info 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 = {
    link: link,
    templateUrl: 'views/user/github/info.html',
    restrict: 'E'
  };
  return directive;
	  
  function link(scope, element, attrs) {
  	console.log('link');
    /* add clean-up listeren */
    element.on('$destroy', function() {
      console.log('directive $destroy event listeren');
      scope.$destroy();
    });
  }
  
}

/* controller */
function BasicController(githubDataService) {

  var vm = this;
  vm.users = [];
  vm.reloadUsers = reloadUsers;
	vm.removeUsers = removeUsers;
  
  init();

  function init() {
    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 getAvengers.' + error.data);
    }
  }

}