Practical AngularJS Part 2 - Sample 5

An example of a service.

by Dave Kerr

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app="app" ng-controller="PingController">
    <p>Ping: {{ping}}</p>
</div>

JavaScript

var app = angular.module('app', [])

// Create a service to expose our ping functionality.
app.factory('PingService', function($timeout, $http) {
      function PingService($timeout, $http) {
          var self = this;
          var lastTripTime = 0;
          
          self.onPingChanged = null;
          
          // Create the function to call to test the ping.
          var testPing = function() {
              var start = (new Date()).getTime();
              $http.get('/echo/html')
                  .success(function() {
                      lastTripTime = (new Date()).getTime() - start;
                      if(self.onPingChanged !== null) {
                        self.onPingChanged(lastTripTime);
                      }
                      $timeout(testPing, 1000);
                  });
          };
          testPing();
      }
      
      return new PingService($timeout, $http);
  });

// Create a simple controller that shows the ping.
app.controller('PingController', function($scope, PingService) {
    $scope.ping = null;
    PingService.onPingChanged = function(ping) {
        $scope.ping = ping;
    };
});