به طور خلاصه ترزیق وابستگی یا dependency injection ، یک الگوی طراحی نرم افزار جهت تزریق وابستگی‌های خارجی یک کلاس به آن، بجای استفاده مستقیم از آن‌ها در درون کلاس می باشد. در اینجا اشیا(Objects) به عنوان وابستگی ها ارسال می شوند. در این مقاله تزریق وابستگی ها در AngularJS را مورد استفاده قرار می دهیم.

مقدمه

Dependency Injection یکی از بهترین ویژگی های AngularJS می باشد. یک الگوی طراحی نرم افزار است که در آن object ها به عنوان وابستگی ها (dependency) ارسال می شوند. این به ما کمک می کند تا وابستگی های کدگذاری شده سخت را حذف کرده و وابستگی های قابل تغییر را ایجاد کنیم. با استفاده از Dependency Injection می توانیم کامپوننت های قابل نگهداری، قابل تست و قابل استفاده مجدد ایجاد کنیم.

Dependency Injection به دلایل زیر مورد نیاز است:

روند  ایجاد و مصرف dependency ها را از هم جدا می کند.

اجازه می دهد تا  dependency های مستقل ایجاد کنیم و توسعه دهیم.

زمانی که لازم باشد می توانیم وابستگی ها را تغییر دهیم.

اجازه می دهد که آبجکت های ساختگی را به عنوان وابستگی ها برای تست، تزریق کنیم.

AngularJS کامپوننت های زیر را ارائه می کند که هرکدام از آنها به عنوان وابستگی تزریق می شوند:

Service

Service در AngularJS یک تابع و یا یک شی است که می تواند برای اشتراک گذاری داده ها استفاده شود و در کل برنامه مورد استفاده قرار می گیرد. به عبارت دیگر می توانیم بگوییم سرویس ها در AngularJS آبجکت هایی هستند که با استفاده از DI(dependency injection) به هم متصل شده اند و می تواند برای اشتراک گذاری و سازماندهی کد در سراسر برنامه مورد استفاده قرار گیرد. Service ها نحوه استفاده از تابع های service( ) را تعریف می کنند و می توانند به شی دیگری از Angular تزریق شوند، مانند controller، , ،سرویس های دیگر فیلترها، directive ها و ...

//Create AngularJS application  
var app = angular.module("myapp", []);  
  
//Create service that contains method which add two inputs  
app.service('appService', function () {  
    this.add = function (a1, a2) {  
        return parseInt(a1) + parseInt(a2);  
    }  
})  
  
//Inject appservice into the controller  
app.controller("appController", function ($scope, appService) {  
    $scope.Add = function () {  
        $scope.total = appService.add($scope.digit1, $scope.digit2);  
    }  
}); 

Factory

Factory تابعی از Angular است که برای برگرداندن یک مقدار(Value) مورد استفاده قرار می گیرد. Factory یک مقدار روی درخواست ایجاد می کند و آن را نگه می دارد.

//Create AngularJS application  
var app = angular.module("myapp", []);  
  
//Create factory that contains method which add two inputs  
app.factory('appService', function () {  
    var factory = {};  
  
    factory.add = function (a1, a2) {  
        return parseInt(a1) + parseInt(a2);  
    }  
    return factory;  
})  
  
//Inject appservice into the controller  
app.controller("appController", function ($scope, appService) {  
    $scope.Add = function () {  
        $scope.total = appService.add($scope.digit1, $scope.digit2);  
    }  
});

Provider

AngularJS به صورت داخلی از provider برای ایجاد service ها، factory و غیره استفاده می کند. با استفاده از متدهای " config" و " run" می توانیم توابعی را مشخص کنیم که در زمان اجرا و پیکربندی برای ماژول اجرا می شود. هر دو تابع قابل تزریق با وابستگی هایی مانند  هستندfactory.

var app = angular.module('myapp', []);  
  
app.config(['provider', function (provider) {  
    //ToDo.  
}])  
app.run(['service', function (service) {  
    //ToDo.  
}]);

Constant

Constant در AngularJS برای ارسال مقدار در فاز پیکربندی استفاده می شود. مقادیر ثابت(Constant) در زمان اجرا نیز در دسترس هستند. همچنین می توانیم از آن در controller و template استفاده کنیم.

var app = angular.module("myapp", []);  
  
//Define Contant  
app.constant('clientId', '123456');  
  
//Use constant in provider  
app.config(['testProvider', 'clientId', function (testProvider, clientId) {  
      
}]);  
  
//Use constant at Controller   
app.controller('TestController', ['$scope', "clientId", function DemoController($scope, clientId) {  
    $scope.clientId = clientId;  
}]); 

Value

Value یک شی JavaScript است که می تواند در حین مرحله پیکربندی تزریق شود.

//Define Value  
app.value('clientId', '123456');  
  
  
//Use value at Controller   
app.controller('TestController', ['$scope', "clientId", function DemoController($scope, clientId) {  
    $scope.clientId = clientId;  
}]);

خلاصه

AngularJS یک مکانیسم تزریق وابستگی پیشرفته  فراهم می کند. اساسا 5 نوع دستور وجود دارد (،Value  Factoryو Service، Provider ،Constant) که در بالا  توضیح داده شده اند و می توانند به هر کدام از وابستگی ها تزریق شوند.

آموزش angular