Services And Custom Services In AngularJS

Akshay Phadke
8y
6.8k
0
0

Article

Overview

In this article, we will see what services and custom services are in AngularJS. First, we will learn about services in Angular and why we use services in Angular JS.

For more articles on AngularJS

Introduction: In this article, we will see:

What is a service in Angular.
Why do we need a service in Angular application.
What are the benefits of using services.

What is a service in Angular?

Before we see what a service is in Angular, we will discuss about a normal development scenario. Suppose, you have developed a web service, aka WCF services, like an object. You can map that object in any service. Similarly, a service in Angular is an object that we can map in our Angular services.

Angular JS has lots of built-in services. We have already seen the $http and $log services in our previous article.

$http Service In AngularJS

$http service is used for making the AJAX calls while the $log service is used for calling an object of a console, which is very useful in debugging applications. We can also build our custom services in AngularJS.

Thus, a service in AngularJS is simply an object that provides some sort of service which can be reused further in other applications.

Why do we need services?

The primary duty of Controller is to build the Model for the View. E.g., to display the list of employee details in ascending order or descending order and so on. In general, the Controller should not be doing much operations. In our previous examples, we have used $http an $log in our Controller.

Services encapsulate the reusable logic that doesn't belong to anywhere i.e. Directives, Filters, Models and Controllers.

What are the benefits of using Services?

Reusability
The main logic behind any webservice is that it should be reusable through an application and other applications too. Suppose, you want to make an AJAX call, you can use a built-in AngularJS Service $http, simply by injecting it into the object that needs the service.
Dependency Injection
They can be simply injected into Controllers or other services which need them.
Testablity
Since services are used in Controllers, it becomes very easy to test them. You can pass the real implementation and perform the unit testing also.

Custom Services in Angular

We will first see how to create a custom service in Angular. Now, here in our page, I have taken two textboxes and one button, as shown below:

<table>
<tr>
<td>ResultOne</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>ResultTwo</td>
<td><input type="text" /></td>
</tr>
<tr>
<td> <input type="button" value="procees" /> </td>
</tr>
</table>

So, when you reload the page, you will get two textboxes and one button. Here, you can type a string and convert that string. So, we need to add some code. In our Model, first we will add ng-model on two input actions and ng-click on the button a function to perform those operations.

<td><input type="text" ng-model="input" /></td>
<td><input type="text" ng-model="output" /></td>
<input type="button" ng-click="transform(input)" value="procees" />

So, my final page code in display.html is:

<body ng-app="mymodule">
<div ng-controller="myController">
<table>
<tr>
<td>ResultOne</td>
<td><input type="text" ng-model="input" /></td>
</tr>
<tr>
<td>ResultTwo</td>
<td><input type="text" ng-model="output" /></td>
</tr>
<tr>
<td> <input type="button" ng-click="transform(input)" value="procees" /> </td>
</tr>
</table>
</div>
</body>

Now, we will go back to our js file.

Now, we need to create a function in which we need to perform those operations where we need to validate the input string store in a variable and process the output.

var mypartone = angular.module("mymodule", []).controller("myController", function($scope) {
$scope.transform = 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];
}
$scope.output = output;
}
});

Here, I have created a function named as transform and attached it to $scope object. Now, that input function will return a string and will be storing those in a variable.

So, when you reload the page, you will get this output:

output

As you can see from the code, it has becomes tedious. We will add a JS file and will reference those in our main script file, as shown below:

Add a new JS file in your solution.

Name it as StringTest and just add the reference of previous script file and paste it, as shown below.

/// <reference path="mytest.js" />
app.factory('string', function() {
return {
transform: 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;
}
};
});

Now, just go back to your main controller and add the function name.

var mypartone = angular.module("mymodule", []).controller("myController", function($scope, string) {
$scope.transform = function(input) {
$scope.output = string.transform(input);
}
});

Just add reference to your html page, as,

<script src="Scripts/StringService.js"></script>

Now, reload the page. You will get the same output.

output

Conclusion

So, this was about services and creating custom services in AngularJS. Hope this article was helpful !!

Up Next

Ebook Download

View all

AngularJS Recipes

Read by 8.5k people

Download Now!

Learn

View all