Angular Services Implementation

Posted By : Swati Rahangdale | 31-Jan-2018

angularjs

Angular Services Implementation

Angular services are created by registering them with the module they are going to operate in.

Below mentioned two way to create services.

Service
Factory

Syntax:

var app = angular.module("app", []);

AngularJS services using Factory

The factory method is used to create an object or add properties to it and return the same object. Then it can be added to the components like controller, service, filter or directive.

Syntax :

app.factory('factoryName',function(){

return factoryObj;

});

Ex:

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}

return factory;
});

Create angular services :

This is instantiated with the new keyword. Given with an instance of the function passed to the service. This object instance becomes the service object that AngularJS registers and is added to the required components.

Syntax : app.service('serviceName',function(){ });

Ex:

mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});

AngularJS also has some built-in services. some are described below.

$location service

EX:

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});

$http Service

$http service is used to request data from the server.

Ex:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});

Provider:

Providers are the only service you can pass into your .config() function.

Syntax :

syntax for creating a provider

app.provider('providerName',function(){ });

syntax for configuring a provider

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

Example:

<html>
<head>
<title>AngularJS Services </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>

</body>
</html>

Ex: Main.js

var app = angular.module('mainApp', []);
define a service named myService
app.service('myService', function () {
this.message = '';
this.setMessage = function (newMessage) {
this.message = newMessage;
return this.message;
};
});

Define factory named 'myFactory'

app.factory('myFactory', function () {
var obj = {};
obj.message = '';
obj.setMessage = function (newMessage) {
obj.message = newMessage;
};
return obj;
});

Defining a provider 'configurable

app.provider('configurable', function () {
var returnMessage = '';
this.setMessage = function (newMessage) {
returnMessage = newMessage;
};
this.$get = function () {
return {
message: returnMessage
};
};
});