Services in angular is the best way to put all your business logic.
Two of the ways of creating of services is- value and service. I am showing you how you can calculate area of a circle by passing any value of radius in the text box using .value and .service.
This is the HTML:
<html>
<head>
<title>Angular JS Controller</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/eg_value.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>
Now here is the code for .value
var myapp = angular.module('mainApp', []);
function Circle() {
this.pi = 3.14;
this.Area = function(r){
return this.pi * r *r;
}
}
myapp.controller("mycontroller", function ($scope, Circle) {
$scope.ok = function(){
$scope.areaCircle = Circle.Area($scope.radius);
};
//$scope.areaCircle = Circle.Area($scope.radius);
}).value('Circle', new Circle());
It stores a single value and is the simplest Angularjs service to create and use. It is just like a key value pair. But it lacks some major features.
Second way is to use service. Here is the code:
var myapp = angular.module('mainApp', []);
myapp.constant("pi", 3.14);
myapp.service('Circle', function(pi) {
this.Area = function (r) {
return pi * r * r;
}
});
myapp.controller("mycontroller", function ($scope, Circle) {
$scope.ok = function(){
$scope.areaCircle = Circle.Area($scope.radius);
};
});
service receives a javascript constructor function as argument. It creates a service by invoking a constructor with the new operator. We can inject other services also in it.
0 Comment(s)