Quick Contact

    AngularJS Services

    AngularJs service is a function, which can use for the business layer of an application. It is like a constructor function that will invoke only once at runtime with new. Services in AngularJS are stateless and singleton objects because we get only one object in it regardless of which application interface created it.

    We can use it to provide functionality in our web application. Each service performs a specific task.

    When we use

    We can use AngularJS services when we want to create things that act as an application interface. It can be used for all those purposes for which constructor is used.

    Types of AngularJS Services

    There are two types of services in angular:

    1. Built-in services –

      There are approximately 30 built-in services in angular.

    2. Custom services –

      In angular if the user wants to create its own service he/she can do so.

    Built-in Services in AngularJS

    They are pre-built services in AngularJS. These services get registered automatically at runtime with the dependency injector. Therefore, by using dependency injector we can easily incorporate these built-in services in our angular application.

    The various built-in services are as follows:
    • $http

    It is a service to communicate with a remote server. It makes an ajax call to the server.

    	< !DOCTYPE html>
    	< html>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">< /script>
    	< body>
    	< div ng-app="demoApp" ng-controller="myController">
    	< p>Today's welcome message is:< /p>
    	< h1>{{message}}< /h1>
    	< /div>
    	< p>A page is requested on server by $http, and the response is set as the value of the "message" variable.< /p>
    	< script>
    	varhttpmodule = angular.module('demoApp', []);
    	httpmodule.controller('myController', function($scope, $http) {
    	$http.get("demo.htm").then(function (response) {
    	$scope.message = response.data;
    	< /script>
    	< /body>
    	< /html>

    Message is:

    Hello AngularJS Students

    A page is requested on a server by $http, and the response is set as the value of the “message” variable.

    • $interval

    It is a wrapper in angular for window.setInterval.

    	< !DOCTYPE html>
    	< html ng-app="intrApp">
    	< head>
    	< meta charset="utf-8" />
    	< title>$interval angularjs< /title>
    	< script src="https://code.angularjs.org/1.3.15/angular.js">
    	< /script>
    	< script src="script.js">< /script>
    	< /head>
    	< body ng-controller="IntervalController">
    	< br />< br />The value of counter is: {{cnt}}
    	< /body>
    	< script>
    	var sample = angular.module("intrApp", []);
    	sample.controller("IntervalController", function($scope, $interval) {
    	$scope.cnt = 0;
    	$scope.increment = function() {
    	$scope.cnt += 1;
    	$interval(function() {
    	}, 2000);
    	< /script>
    	< /html>

    The value of the counter is: 0

    But the value gets increased by 1 in every 2milisecond.
    • $timeout

    It is the same as setTimeout function in javascript. To set a time delay on the execution of a function $timeout is used.

    	< !DOCTYPE html>
    	< html ng-app="myApp">
    	< head>
    	< scriptsrc="//code.angularjs.org/snapshot/angular.min.js">< /script>
    	< script src="script.js">< /script>
    	< /head>
    	< body ng-controller="timeController">
    	< div>
    	< div>Message is displayed afer3 seconds :{{msg}}< /div>
    	< /div>
    	< script>
    	var sample = angular.module('myApp', []);
    	sample.controller('timeController', function($scope, $timeout){
    	$scope.msg = "Hey!";
    	}, 3000); 
    	< /script>
    	< /body>
    	< /html>

    Enroll Yourself in Live Classes For AngularJS Tutorial.

    The message is displayed after 3 seconds: Hey!

    • $anchorscroll

      The page which specifies by an anchor in $location.hash() scrolls using $anchorscroll.

    • $animate

      It consists of many DOM (Document Object Model) utility methods that provide support for animation hooks.

    • $animateCss

      It will perform animation only when ngAnimate includes, by default.

    • $cacheFactory

      It is a factory that constructs cache objects. It puts the key-value pair and retrieves the key-value pair. Also, it can provide access to other services.

    • $templateCache

      Whenever a template is used for the first time, it is loaded in template cache. It helps in quick retrieval.

    • $compile

      We can compile HTML string or DOM in the template by it. Also, it produces a template function which will use to link template and scope together.

    • $controller

      By using a $controller, we can instantiate Angular controller components.

    • $document

      J-query wrapped the reference to the window. Document element is specified by it.

    • $exceptionHandler

      Any uncaught exception in an angular expression is sent to this service.

    • $filter

      Use to format the data for displaying to the user.

    • $httpParamSerializer

      It converts an object to a string.

    • $httpParamSerializerJQLike

      We can sort Params in alphabetic order. It follows j-query’s param() method logic.

    • $xhrFactory

      XMLHttpRequest objects is created using factory function.

    • $httpBackend

      Browser incompatibilities can be handled using it.

    • $inerpolate

      Use for data binding by HTML $compile service.

    • $locale

      For various angular components, localization rules can be provided using $locale.

    • $location

      URL in the address bar of a browser is parsed by it and then the URL is made available to your application. Changes to the URL in the address bar is reflected in $location service and vice-versa.

    • $log

      It is a console logger.

    • $parse

      Use to convert Angular expression into a function using $parse.

    • $q

      A function can run asynchronously using $q and its return value, which will use when they finish the processing.

    • $rootElement

      It is a root element of the angular application.

    • $rootScope

      Use in an angular application.

    • $sceDelegate

      Use in the backend by $sce.

    Customs Services in AngularJS

    We can create our own service by connecting it with a module in AngularJS. And to use it add it as a dependency while defining controller.

    Here, in the below code we created a custom service demo.

    	< !DOCTYPE html>
    	< html>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">< /script>
    	< body>
    	< div ng-app="myApp"ng-controller="myCtrl">
    	< p>The octal value of225is:< /p>
    	< /div>
    	< p>A custom service with a method that converts a given number into a octal number.< /p>
    	< script>
    	var app = angular.module('myApp', []);
    	app.service('demo', function(){
    	this.myFunc = function(x){
    	app.controller('myCtrl', function($scope, demo){
    	$scope.hex = demo.myFunc(225);
    	< /script>
    	< /body>
    	< /html>

    The octal value of 225 is:


    A custom service with a method that converts a given number into an octal number.

    Enroll Yourself in Live Classes For Angularjs Training in Noida.

    Copyright 1999- Ducat Creative, All rights reserved.