Services in Angular Js
Services are the one of the strongest
features of Angular Js. It is mainly concern with the reusability of the
code. The angular services object has properties and methods objects just like
any other JavaScript object. The angular Js services make the application more manageable
and testable.
Angular provides several useful
services like $http, $log, $filter etc. There are many more others built-in
services provided by Angular. We can also create our Own Angular Service.
Note: The built-in services provided by Angular always prefixed
with dollar ($) sign.
Use
of $timeout Service
Step 1: Create a Blank Project.
Step 2: Create a Blank HTML Page.
Step 3: In the Head Section of HTML Page set the CDN Link of angular Js.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js></script>
</head>
Step 4: Now, create script section under head tag to create angular js script.
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader
= "Hello friends!";
$timeout(function () {
$scope.message= "Hope you enjoying Angular?";
}, 4000);
});
</script>
In above code we simply pass the
$timeout service to our controller and set the time out duration (in
milliseconds).
Step 5: Create a div section in with in body and register your ng-app and ng-controller
<div ng-app="myApp" ng-controller="myCtrl">
<p>This
header will change after four seconds </p>
<h1>{{message}}</h1>
</div>
How
to create your own service
In
this program we will add a space after every Upper case letter in the output
HTML Page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="scripts/angular.js"></script>
<script src="scripts/MyScript.js"></script>
<script src="scripts/StringTransformationService.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<tr>
<td>Your
String</td>
<td><input type="text" ng-model="input" /> </td>
</tr>
<tr>
<td>Result</td>
<td><input type="text" ng-model="output" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" ng-click="ChangeString(input)"
value="Prcess" />
</td>
</tr>
</table>
</div>
</body>
</html>
MyScript.js
Page
var app = angular
.module("myModule", [])
.controller("myController", function ($scope,
MyStringTransformationService) {
$scope.ChangeString = function (input) {
$scope.output =
MyStringTransformationService.ChangeString(input);
}
});
[In above code we’ve created our controller and pass
our own custom service named, “MyStringTransformationService”.
We’ve also created a function that will call the service and that function will
receive one argument as “input”]
Now
will create our own custom service.
1. Add
a js file to the project and name it stringReverseService.js
2. Now,
copy and Paste the below code. In this example we are using the factory method to create and register
our service.
StringTransformationService.js
app.factory("MyStringTransformationService", function () {
return {
ChangeString: function (input) {
if (!input) {
return input;
}
var output = "";
for (var i = 0; i
< input.length; i++)
{
if (i > 0 && input[i] == input[i].toUpperCase())
{
output = output + " ";
}
output = output + input[i];
}
return output;
}
}
});
[We
will explain more examples related to services in upcoming tutorial]
No comments:
Post a Comment