forum

Home / DeveloperSection / Forums / Angular JS custom Services Example.

Ask Question
Sandra Emily

Sandra Emily

Follow
Content writing is the process of writing, editing, and publishing content in a digital format. That content can include blog posts, video or podcast scripts, ebooks or whitepapers, press releases, product category descriptions, landing page or social media copy and more.

Can you answer this question?

Answer

1 Answers

Ravi Vishwakarma

Ravi Vishwakarma

25-Jun-2024

Creating custom services in AngularJS is a way to encapsulate reusable code, such as business logic, data retrieval, or utility functions, making them available across your application. 

You can create and use custom services using different methods: service, factory, and provider.

Step 1: Define the AngularJS module and service

var app = angular.module('myApp', []);

app.service('MathService', function() {
    this.add = function(a, b) {
        return a + b;
    };
    this.subtract = function(a, b) {
        return a - b;
    };
});

Step 2: Use the service in a controller

app.controller('MainController', ['$scope', 'MathService', function($scope, MathService) {
    $scope.addition = MathService.add(5, 3);      // 8
    $scope.subtraction = MathService.subtract(5, 3);  // 2
}]);

Step 3: Create the HTML to use the controller

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Service Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="MainController">
    <p>Addition: {{ addition }}</p>
    <p>Subtraction: {{ subtraction }}</p>
</body>
</html>

Note

  • Service: Uses a constructor function to create a singleton service. It’s suitable for simple services.
  • Factory: Returns an object or a function. It’s more flexible than a service.
  • Provider: Provides the most flexibility. It allows configuration during the configuration phase of the application.

 

MindStick Training

Liked By