AngularJS Services

Angular Js services nothing but a implemenation or function or object. Anguar has already some pre definied methods/services. where user directly use those. We can write our services to using this concept. So that this service can be used across the application. It is kind of reusability.

Angular services are:
  • Lazily instantiated: Angular JS instantiates a service when an application component use it.
  • Singletons: Each component dependent on a service gets a reference to the single instance generated by the service factory. This will not be created again and again, instead same reference will be used for wherever it is required. Nothing memory reduction.

These are the main two advantage with Angular JS services.

Angular JS offering many useful services in built, for example $http.

$http: $http makes the server call with request and once after receiving response from application, will handle that to display or process that.
var app = angular.module('httpApp', []);
app.controller('httpCtrl', function($scope, $http) {
    $http.get("welcomeJS.htm").then(function (response) {
        $scope.myWelcome =;
$location: The $location service will return information about the location of the current web page
var app = angular.module('locApp', []);
app.controller('locCtrl', function($scope, $location) {
    $scope.url = $location.absUrl();
$interval: The $interval service is same as window.setInterval function.
var app = angular.module('intervalApp', []);
app.controller('intervalCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
$timeout: The $timeout service is same like window.setTimeout function.
var app = angular.module('myApp', []);
app.controller('timeCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
$log: The $log is for logging. It will writes the message into the browser's console safely. $log has different levels to show message as usual. log(),info(), warn(), $error and $debug
angular.module('logApp', [])
.controller('logController', ['$scope', '$log', function($scope, $log) {
  $scope.$log = $log;
  $scope.message = 'Hello World!';
$cacheFactory: TFactory that constructs Cache objects and gives access to them.
var cache = $cacheFactory('cacheId');

cache.put("key", "value");
cache.put("another key", "another value");

// We've specified no options on creation
expect({id: 'cacheId', size: 2});

get(cacheId): Get access to a cache object by the cacheId used when it was created.

<div ng-controller="CacheController">
  <input ng-model="newCacheKey" placeholder="Key">
  <input ng-model="newCacheValue" placeholder="Value">
  <button ng-click="put(newCacheKey, newCacheValue)">Cache</button>

  <p ng-if="keys.length">Cached Values</p>
  <div ng-repeat="key in keys">
    <span ng-bind="key"></span>
    <span>: </span>
    <b ng-bind="cache.get(key)"></b>

  <p>Cache Info</p>
  <div ng-repeat="(key, value) in">
    <span ng-bind="key"></span>
    <span>: </span>
    <b ng-bind="value"></b>

To know more about remaining services click here