Post
Ask Question

Services And Custom Services In AngularJS

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.

In this article, we will see.

  • What is a service in Angular?
  • Why do we need a service in the 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 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 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 that can be reused further in other applications.

Why do we need services?

The primary duty of the 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 many operations. In our previous examples, we have used $http an $log in our Controller.

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

What are the benefits of using Services?

  • Reusability: The main logic behind any web service 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 that need them.
  • Testability: 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 on 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="process" />

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 stored 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 transform and attached it to the $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.

$scope object

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

Add a new JS file to your solution.

JS file

Name it StringTest and just add the reference of the 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 a 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 !!


Similar Articles