---
title: "Create Custom Services in AngularJS"  
description: "Creating custom services in AngularJS provides a structured way to organize and share code across your application."  
author: "Ashutosh Patel"  
published: 2024-06-20  
updated: 2024-06-20  
canonical: https://www.mindstick.com/blog/304402/create-custom-services-in-angularjs  
category: "angular js"  
tags: ["javascript", "angular js", "angularjs service"]  
reading_time: 3 minutes  

---

# Create Custom Services in AngularJS

#### Angular JS Custom Service

[Creating custom](https://www.mindstick.com/interview/34070/creating-custom-annotations-in-java) services in AngularJS makes it [possible to add](https://answers.mindstick.com/qa/51515/how-much-internal-storage-does-each-iphone-model-have-can-internal-storage-be-expanded-is-it-possible-to-add-external-storage-does-the-iphone-have-a-microsd-slot) [business logic](https://answers.mindstick.com/qa/30543/what-is-business-logic), data manipulation, or other reusable [functionality](https://www.mindstick.com/blog/136/using-watermark-functionality-in-textbox-by-jquery) to [your application](https://www.mindstick.com/forum/34702/please-tell-me-what-is-cross-site-scripting-and-how-is-it-harmful-for-your-application).

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

#### Defining a Custom Service

**Using** `service` **method**

You can create [custom service](https://www.mindstick.com/forum/161389/how-do-you-create-and-use-a-custom-service-in-angularjs) using `service` method in Angular JS program

```javascript
// 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?](https://www.mindstick.com/interview/33917/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,

```javascript
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,

```html
<!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-

![Create Custom Services in AngularJS](https://www.mindstick.com/blogs/5e94db63-4837-48cf-9b86-4f88bad78de7/images/2e19bfc3-6e19-45e7-a39f-42af954ec190.png)

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](https://www.mindstick.com/blog/11464/improve-your-understanding-of-web-applications)

**Also, Read:** [Custom Filters in AngularJS](https://www.mindstick.com/blog/304399/custom-filters-in-angularjs)

---

Original Source: https://www.mindstick.com/blog/304402/create-custom-services-in-angularjs

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
