Create Custom Services in AngularJS

Angular JS Custom Service

Creating custom services in AngularJS makes it possible to add business logic, data manipulation, or other reusable functionality to your application.

Here's how you can create and use custom services,

Defining a Custom Service

Using service method

You can create custom service using service method in Angular JS program

// service method for create custom service
angular.module("myApp", [])
.service("Calculate", function(){
    // custom service method for add two number
    this.Addition = function(a, b){
        return a+b;
    };
    // custom service method for subtract two number
    this.Subtract = function(a, b){
        return a-b;
    };
    // custom service method for multiply two number
    this.Multiply = function(a, b){
        return a*b;
    };
    // custom service method for divide two number
    this.Division= function(a, b){
        return a/b;
    }
});

In the example above

Calculate is the name of custom service.
this.Addition, this.Subtract, this.Multiply, and this.Division are the method defined in the service that are accessible outside the service.

Injecting Dependencies
If your service depends on other services or utilities, put them in the service as parameters.

Also, Read: What is built-in services in AngularJS?

Using Custom Services

Once defined, you can inject and use custom services in controllers, directives, or other applications,

angular.module("myApp", [])
.controller("myController", function($scope, Calculate){
    // take two integer variable and assign value
    $scope.value1 = 20;
    $scope.value2 = 5;
    // assign result returned by custom service methods
    $scope.AddisionRes = Calculate.Addition($scope.value1, $scope.value2);
    $scope.SubtractRes = Calculate.Subtract($scope.value1, $scope.value2);
    $scope.MultiplyRes = Calculate.Multiply($scope.value1, $scope.value2);
    $scope.DivisionRes = Calculate.Division($scope.value1, $scope.value2);
})

Example-
Here is a simplified example of using a custom service (Calculate) in AngularJS,

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Custom Service Example</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- bootstrap cdn -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- angular js cdn -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body data-ng-controller="myController">
    <div class="container my-4">
        <div class="row">
            <div class="cols">
                <h3>Custom Service Example</h3>
                <p>Addition of two numbers : <span class="fw-semibold">{{AddisionRes}}</span></p>
                <p>Subtraction of two numbers : <span class="fw-semibold">{{SubtractRes}}</span></p>
                <p>Multiplication of two numbers : <span class="fw-semibold">{{MultiplyRes}}</span></p>
                <p>Division of two numbers : <span class="fw-semibold">{{DivisionRes}}</span></p>
            </div>
        </div> 
    </div>

    <script>
        angular.module("myApp", [])
        .controller("myController", function($scope, Calculate){
            // take two integer variable and assign value
            $scope.value1 = 20;
            $scope.value2 = 5;
            // assign result returned by custom service methods
            $scope.AddisionRes = Calculate.Addition($scope.value1, $scope.value2);
            $scope.SubtractRes = Calculate.Subtract($scope.value1, $scope.value2);
            $scope.MultiplyRes = Calculate.Multiply($scope.value1, $scope.value2);
            $scope.DivisionRes = Calculate.Division($scope.value1, $scope.value2);
        })
        // service method for create custom service
        .service("Calculate", function(){
            // custom service method for add two number
            this.Addition = function(a, b){
                return a+b;
            };
            // custom service method for subtract two number
            this.Subtract = function(a, b){
                return a-b;
            };
            // custom service method for multiply two number
            this.Multiply = function(a, b){
                return a*b;
            };
            // custom service method for divide two number
            this.Division= function(a, b){
                return a/b;
            }
        });
    </script>
</body>
</html>

Output-

Creating custom services in AngularJS provides a structured way to organize and share code in your application, improves modularity and makes it easier to develop complex web applications

Also, Read: Custom Filters in AngularJS

blog

Create Custom Services in AngularJS

Angular JS Custom Service

Defining a Custom Service

Using Custom Services

Ashutosh Kumar Verma

Leave Comment

Comments

Liked By