In Angular JS we can create custom service by three ways :
- Factory.
- Service
- Provider.
to understand the different between these three I have developed a simple program.
STEP 1: Add one index.html page and past the following code to your page.
<head>
<title>Angular JS Custom Service Example</title>
<script src="angular.min.js"></script>
<script src="Script.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="Ctrl">
Enter first name: <input type="text" ng-model="a"><br><br>
Enter last name: <input type="text" ng-model="b"><br>
Result Factory : <label> {{sumByFactory}}</label>
<br>
Result Service : <label> {{sumByService}}</label>
<br>
Result Provider : <label> {{sumByProvider}}</label>
<br>
<input id="Button1" type="button" value="Cal Factory" ng-click="factoryResult();" />
<input id="Button1" type="button" value="Cal Service" ng-click="serviceResult();" />
<input id="Button1" type="button" value="Cal Service" ng-click="ProviderResult();" />
</div>
</body>
STEP 2: Add one Script.js page and past the following code to your page.
/// <reference path="angular.min.js" />
var mainApp = angular.module("mainApp", []);
mainApp.controller('Ctrl', ["$scope", "calFactory", "calService", "calProviderService", function ($scope, calFactory, calService, calProviderService) {
$scope.a = 10;
$scope.b = 20;
$scope.factoryResult = function () {
$scope.sumByFactory = calFactory.getSum(parseInt($scope.a), parseInt($scope.b));
}
$scope.serviceResult = function () {
$scope.sumByService = calService.getSum(parseInt($scope.a), parseInt($scope.b));
}
$scope.ProviderResult = function () {
$scope.sumByProvider = calProviderService.getSum(parseInt($scope.a), parseInt($scope.b));
}
}]);
In factory we return complete object while in service we return only result value like following example . Basically their is not much different between this two, only the different is the way they define.
mainApp.factory("calFactory", ["$log", function ($log) {
$log.log("Calling Factory");
var vfactory = {};
vfactory.getSum = function (a, b) {
return a + b;
}
return vfactory;
}]);
mainApp.service("calService", ["$log", function ($log) {
$log.log("Calling Service");
this.getSum = function (a, b) {
return a + b;
}
}]);
mainApp.provider("calProviderService", function () {
var baseUrl = "";
this.config = function (url) {
baseUrl = url;
};
this.$get = ["$log", "$http", function ($log, $http) {
$log.log("Calling Provider");
var vProvider = {};
vProvider.getSum = function (a, b) {
return a + b;
//$http({
// url: baseUrl + "?op=Add",
// method: "GET"
//}).then(function (result) {
// $log.log(result.data);
//}, function (error) {
// $log.error("Error has accure");
//});
}
return vProvider;
}];
});
when we adding config for Provider it is mandatory to add Provider at last of Service Provider name like 'calProviderServiceProvider' we add Provider at last. So if you need to configer any value before use the service then you have to used provider and define your config like follwing config. In this example I use config to define Base Url before calling getSum provider.
mainApp.config(["calProviderServiceProvider",function (calProviderServiceProvider) {
calProviderServiceProvider.config("http://www.dneonline.com/calculator.asmx")
}]);
No comments:
Post a Comment