We can create service through provider,service,value and factory. In this blog I am describing provider and factory. For value and service you can refer to my previous blog -Calculate area of a circle using .value and .service in angularjs
By creating factory service we can inject many other services in it.In a Factory you create an object, add properties and methods to it, then return that same object. When you pass this service into your controller, those properties on the object will now be available in that controller through your factory.
Here is an example:-
<html>
<head>
<title>Angular JS Controller</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/eg_provider.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="mycontroller">
<h1>AngularJS Sample Application</h1>
<div>
<form>
<p>Enter the radius: <input type="text" name="radius" ng-model="radius"/></p>
<input type="button" value="Area" ng-click="ok()"/>
<div>The area of circle is {{areaCircle}}</div>
</form>
</div>
</div>
</body>
</html>
You need to add the below code into your controller:
var myapp = angular.module('mainApp', []);
myapp.constant("pi", 3.14);
myapp.factory('Circle', function(pi) {
var myfactory = {};
myfactory.Area = function (r) {
return pi * r * r;
}
return myfactory;
});
myapp.controller("mycontroller", function ($scope, Circle) {
$scope.ok = function(){
$scope.areaCircle = Circle.Area($scope.radius);
};
});
Provider is a special factory method with a method get() which is used to return the value/service/factory.Providers can be configured during the module configuration phase. The constructor function is instanttiated before the $get method is called.
You need to add the below code into your controller with the same HTML defined above.
var myapp = angular.module('mainApp', []);
myapp.constant("pi", 3.14);
myapp.provider('Circle', function () {
//var area;
return {
$get: function (pi) {
return {
area: function(r){
return pi * r * r;
}
}
}
}
});
myapp.controller("mycontroller", function ($scope, Circle) {
$scope.ok = function(){
$scope.areaCircle = Circle.area($scope.radius);
};
});
0 Comment(s)