Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

Angular JS custom Services Example.

Sandra Emily 1227 24 Jun 2024

Angular JS custom Services Example.

1 Answers

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.

advertising

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.