AngularJS services are JavaScript functions for specific tasks, which can be reused throughout the application.

In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application.

AngularJS includes services for different purposes. For example, $http service can be used to send an AJAX request to the remote server.

AngularJS also allows you to create custom service for your application.

Most AngularJS services interact with the controller, model or custom directives. However, some services interact with view (UI) also for UI specific tasks.

      <div ng-app="myApp" ng-controller="myCtrl">

      <h3>{{myUrl}}</h3>
      </div>
      <script>
      var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope, $location) {
      $scope.myUrl = $location.absUrl();
      });
      </script>

Use a Custom Service Inside a Filter
Once we created a service, and connected it to our application,
we use the service in any controller, directive, filter, or even inside other services.
To use the service inside a filter, add it as a dependency when defining the filter:
To create your own service, connect your service to the module:

     <div ng-app="myApp" ng-controller="myCtrl">
      <h1>{{hex}}>/h1>
      </div>
      <script>
      var app = angular.module('myApp', []);
      app.service('hexafy', function() {
      this.myFunc = function (x) {
      return x.toString(16);
       }
      });
     app.controller('myCtrl', function($scope, hexafy) {
     $scope.hex = hexafy.myFunc(255);
     });
     </script>

Why we use Services?

1.They contain methods that maintain data throughout the life of an application, i.e. data does not get refreshed and is available all the time.

2.The main objective of a service is to organize and share business logic, models, or data and functions with different components of an Angular application.

3.For many services, like the $location service, it seems like you could use objects that are already in the DOM, like the window.location object, and you could, but it would have some limitations, at least for your AngularJS application.

4.AngularJS constantly supervises your application, and for it to handle changes and events properly, AngularJS prefers that you use the $location service instead of the window.location object.

The $http Service

The $http service is used to send or receive data from the remote server using browser's XMLHttpRequest or JSONP.