Course Progress 30%

AngularJS Services

← AngularJS Filters AngularJS AJAX – $http →

AngularJS Services का उपयोग application में reusable logic, data और functionality को store और share करने के लिए किया जाता है। Services AngularJS architecture का बहुत important हिस्सा हैं क्योंकि ये Controllers को lightweight और clean रखने में मदद करते हैं।

Simple शब्दों में, जो काम बार-बार controllers में repeat हो सकता है, उसे Service में डाल दिया जाता है।

Service क्या है

Service एक JavaScript object या function होता है जिसे AngularJS Dependency Injection के जरिए controllers, directives या अन्य services में inject करता है।

Service का मुख्य उद्देश्य:

  • Reusable code लिखना
  • Data share करना
  • Business logic को centralize करना

Services usually singleton होते हैं, यानी पूरी application में service का सिर्फ एक ही instance होता है।

Service क्यों जरूरी है

अगर सारा logic controllers में लिख दिया जाए तो:

  • Code messy हो जाता है
  • Same logic multiple controllers में repeat होता है
  • Maintenance मुश्किल हो जाती है

Services इन problems को solve करते हैं।

AngularJS में Service के Types

AngularJS में services बनाने के कई तरीके हैं:

  • service()
  • factory()
  • provider()
  • value()
  • constant()

सबसे ज्यादा use होने वाले service() और factory() हैं।

service() Method से Service बनाना

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

app.service("myService", function() {
  this.message = "Hello from Service";
});

Controller में use करना:

app.controller("myCtrl", function($scope, myService) {
  $scope.text = myService.message;
});

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
  <p>{{text}}</p>
</div>

Code Explanation

  • myService नाम की service बनाई गई
  • Service में message property define है
  • Controller में service inject की गई
  • $scope.text को service का data assign किया गया
  • View में service का data display हो रहा है

Service में Functions बनाना

Services में functions लिखना बहुत common है।

app.service("calcService", function() {
  this.add = function(a, b) {
    return a + b;
  };
});

Controller:

app.controller("calcCtrl", function($scope, calcService) {
  $scope.result = calcService.add(10, 20);
});

Code Explanation

  • calcService में add() function है
  • Controller उस function को call कर रहा है
  • Result scope में store होकर View में दिख रहा है

factory() Method से Service बनाना

factory() method object return करता है।

app.factory("userService", function() {
  return {
    name: "Rahul",
    role: "Admin"
  };
});

Controller:

app.controller("userCtrl", function($scope, userService) {
  $scope.user = userService;
});

Code Explanation

  • userService object return करता है
  • Controller को पूरा object मिलता है
  • Object की properties View में access होती हैं

service() और factory() में Difference

  • service() constructor function की तरह काम करता है
  • factory() directly object return करता है
  • service() में this keyword use होता है
  • factory() ज्यादा flexible माना जाता है

Data Sharing Using Service

Service singleton होने के कारण data share करने में बहुत useful होती है।

app.service("sharedService", function() {
  this.count = 0;
});

Controller 1:

app.controller("firstCtrl", function($scope, sharedService) {
  $scope.service = sharedService;
});

Controller 2:

app.controller("secondCtrl", function($scope, sharedService) {
  $scope.service = sharedService;
});

Code Explanation

  • sharedService एक ही instance है
  • दोनों controllers same data share कर रहे हैं
  • एक controller में change दूसरे में भी दिखेगा

Built-in AngularJS Services

AngularJS कई built-in services भी provide करता है।

Common built-in services:

  • $http – server communication
  • $timeout – timeout function
  • $interval – interval function
  • $location – URL handling
  • $filter – filters use करने के लिए

Example using $timeout:

app.controller("timeCtrl", function($scope, $timeout) {
  $scope.message = "Waiting...";

  $timeout(function() {
    $scope.message = "Done";
  }, 2000);
});

Code Explanation

  • $timeout JavaScript setTimeout जैसा है
  • 2 seconds बाद message update होता है
  • View automatically update हो जाती है

value() और constant()

value() simple data store करने के लिए use होता है।

app.value("appName", "My Angular App");

constant() भी value जैसा है लेकिन configuration phase में भी available रहता है।

app.constant("API_URL", "/api/v1");

Service Best Practices

  • Controllers को thin रखें
  • Business logic services में रखें
  • Services को reusable बनाएं
  • Naming clear और meaningful रखें

Common Service Mistakes

  • Service में DOM manipulation करना
  • Service और controller logic mix करना
  • Global variables use करना
  • Unnecessary multiple services बनाना

Summary

इस chapter में आपने सीखा:

  • AngularJS Services क्या होती हैं
  • service() और factory() से service बनाना
  • Controller में services inject करना
  • Data sharing using services
  • Built-in AngularJS services
  • Services के best practices और common mistakes
← AngularJS Filters AngularJS AJAX – $http →
  • Home