Quick Contact


    How to Create and Register AngularJS Services.

    We can create angular services by registering it into a module. The module operates services.

    In angular JS, there are three ways to create service in AngularJS.

    • Factory
    • Service
    • Provider
    Factory

    Using Modules factory API, we can create service. We can use a factory method to create an object, properties add to it and return the same object.

    Syntax

    var sample = angular.module(“app”, []);

    sample.factory(‘factoryName’,function(){

    returnfactoryObj;

    });

    Service

    We can use a new keyword to instantiate it, an instance of the function will pass by service. The instance of an object is the service object. Angular JS registers service object. Here, we can inject this object into various other components of angular application such as controller, directives, services, filters etc.

    Syntax:

    var sample = angular.module(“app”, []);

    sample.service(‘serviceName’,function(){});

    Provider

    We can pass only $provider into the .config function. It uses $get function to return value. It will use before making a service available you want to provide module –wise configuration for the service object.

    Syntax:

    var sample = angular.module(“app”, []);

    // syntax to create a provider

    sample.provider(‘providerName’,function(){});

    //syntax to configure a provider

    sample.config(function(providerNameProvider){});

    AngularJS Service v/s Factory
    • Service and factory both are singletons.
    • AngularJS .Service is like a constructor while .factory is a method that returns a value.
    • AngularJS .factory() provides us much more power and flexibility, whereas a .service() is the “end result” of a .factory() call.

    Enroll Yourself in Live Classes For AngularJS Tutorial.

    Angular Services Example
    	
    	< html>
    	< head>
    	< title>AngularJS Services Tutorial< /title>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js">< /script>
    	< script src="main.js">< /script>
    	< /head>
    	< body>
    	< div>
    	< div ng-app="mainApp"ng-controller="myController">
    	< p>< b>Message From Service: < /b>{{serviceMsg}}< /p>
    	< p>< b>Message From Factory: < /b>{{factoryMsg}}< /p>
    	< p>< b>Message From Provider:< /b>{{providerMsg}}< /p>
    	< /div>
    	< /div>
    	< script>
    	var sample = angular.module('mainApp', []);
    	//define a service named myService
    	sample.service('myService', function(){
    	this.message = '';
    	this.setMessage = function(newMsg){
    	this.msg = newMsg;
    	returnthis.msg;
    	};
    	});
    	//define factory named 'myFactory'
    	sample.factory('myFactory', function(){
    	varobj = {};
    	obj.message = '';
    	obj.setMessage = function(newMsg){
    	obj.message = newMsg;
    	};
    	returnobj;
    	});
    	//Defining a provider 'configurable'
    	sample.provider('configurable', function(){
    	varreturnMessage = '';
    	this.setMessage = function(newMsg){
    	returnMessage = newMsg;
    	};
    	this.$get = function(){
    	return{
    	message: returnMessage
    	};
    	};
    	});
    	//configuring provider
    	sample.config(function(configurableProvider){
    	configurableProvider.setMessage("Hello, This is Provider here!");
    	});
    	//defining controller
    	sample.controller('myController', function($scope, myService, myFactory, configurable){
    	$scope.serviceMsg = myService.setMessage("Hello,This is Service here!");
    	myFactory.setMessage("Hello,This is Factory here! ");
    	$scope.factoryMsg = myFactory.message;
    	$scope.providerMsg= configurable.message;
    	});
    	< /script>
    	< /body>
    	< /html>
    	
    Output:

    A message From Service: Hello, This is Service here!

    Message From Factory: Hello, This is Factory here!

    Message From Provider: Hello, This is Provider here!

    Dependencies in Services

    Like you declare dependencies in a controller, similarly, you can declare dependencies in AngularJS services too. We can declare the dependency in service by specifying them in a factory function signature of service.

    	var batch = angular.module('batchModule', []);
    	batch.factory('batchLog', ['$interval', '$log', function($interval, $log){
    	varmsgQueue = [];
    	functionlog(){
    	if(msgQueue.length){
    	$log.log('batchLog messages: ', msgQueue);
    	msgQueue = [];
    	}
    	}
    	$interval(log, 50000);
    	returnfunction(message){
    	msgQueue.push(message);
    	}
    	}]);
    	batch.factory('routeTemplateMonitor', ['$route', 'batchLog', '$rootScope',
    	function($route, batchLog, $rootScope){
    	return{
    	startMonitoring: function(){
    	$rootScope.$on('$routeChangeSuccess', function(){
    	batchLog($route.current ? $route.current.template:null);
    	});
    	}
    	};
    	}]);
    	

    Enroll Yourself in Live Classes For Angularjs Training in Noida.

    Copyright 1999- Ducat Creative, All rights reserved.