Course Progress 68%

AngularJS Dependency Injection

← AngularJS Application AngularJS Custom Directives →

AngularJS Dependency Injection (DI) एक core concept है जो application के components को loosely coupled बनाता है। इसका मतलब यह है कि किसी component को यह खुद decide नहीं करना पड़ता कि उसे कौन-सा object या service चाहिए, बल्कि AngularJS runtime पर उसे automatically provide कर देता है।

Dependency Injection की वजह से AngularJS applications:

  • Easy to maintain होती हैं
  • Easy to test होती हैं
  • Modular और scalable बनती हैं

Dependency Injection क्या है

Simple शब्दों में, Dependency Injection का मतलब है:
किसी object को उसकी dependencies बाहर से provide करना, न कि वह खुद उन्हें create करे।

AngularJS में:

  • Controller
  • Service
  • Directive
  • Filter

ये सभी dependencies AngularJS injector से लेते हैं।

Dependency Injection क्यों जरूरी है

Without DI:

  • Code tightly coupled हो जाता है
  • Testing difficult हो जाती है
  • Reusability कम हो जाती है

With DI:

  • Code loosely coupled रहता है
  • Components easily replace हो सकते हैं
  • Mock services से testing आसान होती है

AngularJS Injector क्या है

Injector AngularJS का internal service है जो:

  • Dependencies को locate करता है
  • Instances create करता है
  • Correct component में inject करता है

Developer को injector manually handle नहीं करना पड़ता, AngularJS खुद manage करता है।

Dependency Injection कहाँ use होती है

AngularJS में DI इन जगहों पर use होती है:

  • Controllers
  • Services
  • Directives
  • Filters
  • Config और Run blocks

Controller में Dependency Injection

app.controller("mainCtrl", function($scope, $http) {
  $scope.message = "Hello DI";
});

Code Explanation

  • $scope और $http dependencies हैं
  • AngularJS function parameters देखकर समझ जाता है कि कौन-सी services inject करनी हैं
  • $http AJAX requests के लिए use होती है

Service में Dependency Injection

app.service("dataService", function($http) {
  this.getData = function() {
    return $http.get("data.json");
  };
});

Code Explanation

  • Service के अंदर $http inject किया गया है
  • Service खुद $http create नहीं करती
  • AngularJS injector उसे provide करता है

Built-in Services और DI

AngularJS बहुत-सी built-in services provide करता है:

  • $http
  • $timeout
  • $interval
  • $location
  • $routeParams
app.controller("ctrl", function($scope, $timeout) {
  $timeout(function() {
    $scope.text = "Updated after 2 seconds";
  }, 2000);
});

Code Explanation

  • $timeout AngularJS wrapper है setTimeout का
  • DI के जरिए injected service digest cycle को support करती है

Custom Service और DI

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

app.controller("calcCtrl", function($scope, mathService) {
  $scope.result = mathService.add(5, 3);
});

Code Explanation

  • Custom service injector में registered होती है
  • Controller में simply inject कर ली जाती है
  • Code clean और reusable रहता है

Dependency Injection in Config Block

Config block में providers inject किए जाते हैं।

app.config(function($routeProvider) {
  $routeProvider.when("/", {
    template: "<h2>Home</h2>"
  });
});

Code Explanation

  • Config phase में service instances available नहीं होते
  • सिर्फ providers inject किए जा सकते हैं
  • Routing configuration के लिए use होता है

Dependency Injection in Run Block

Run block application start होने पर execute होता है।

app.run(function($rootScope) {
  $rootScope.appName = "AngularJS App";
});

Code Explanation

  • Run phase में services fully available होती हैं
  • Global initialization के लिए use किया जाता है

Minification Problem in DI

JavaScript minification में function parameter names change हो जाते हैं।

app.controller("minCtrl", function(a, b) {
});

AngularJS यहाँ नहीं समझ पाएगा कि a और b कौन-सी services हैं।

Minification Safe Dependency Injection

Inline Array Annotation

app.controller("safeCtrl", ["$scope", "$http", function($scope, $http) {
}]);

$inject Property

function myCtrl($scope, $http) {
}
myCtrl.$inject = ["$scope", "$http"];
app.controller("myCtrl", myCtrl);

Explanation

  • Dependencies string format में define की जाती हैं
  • Minification से problem नहीं होती
  • Production apps में जरूरी है

Dependency Injection in Directives

app.directive("myDir", function($timeout) {
  return {
    link: function(scope) {
      $timeout(function() {
        scope.text = "Directive Loaded";
      }, 1000);
    }
  };
});

Code Explanation

  • Directive में भी services inject हो सकती हैं
  • Reusable components बनते हैं

Dependency Injection Best Practices

  • Controllers में minimal logic रखें
  • Business logic services में रखें
  • Minification-safe DI हमेशा use करें
  • Built-in services का proper use करें

Common Dependency Injection Mistakes

  • Services manually create करना
  • Controller में heavy logic लिखना
  • Minification safe syntax ignore करना
  • $rootScope का overuse

Summary

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

  • Dependency Injection क्या है
  • AngularJS injector कैसे काम करता है
  • Controllers और services में DI
  • Config और run blocks में DI
  • Minification problems और solutions
  • Best practices और common mistakes
← AngularJS Application AngularJS Custom Directives →
  • Home