×

Html & Html5

The World's best Software Development Study Portal

AngularJS Services


  • 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.






  • Example of $location service

          <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>

    Output
    http://ittrainingclasses.in/learn-angularjs-services.html



    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:



    Let's understand with an example
    A custom service with a method:

    converts a 255 number into a hexadecimal number

         <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>
    
    Output
    ff



    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.