بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش بیستم

AngularJS Dependency Injection

تزریق وابستگی یک الگوی طراحی نرم افزار است که در آن اجزای نرم افزار به جای برنامه نویسی مستقیم و قرار گرفتن در برنامه به صورت وابستگی در نرم افزار افزوده می شود. این رابطه باعث می شود که جز اصلی در یک محل دیرگ باشد وب توان آن را در بخش های مختلف تزریق و تنظیم کرد.
این کار باعث می شود اجزا برنامه قابلیت استفاده مجدد، تست پذیری و نگهداری را به انجام رسانند (reusable، testable و maintainable).
AngularJS یک مکانیزم تزریق وابستگی (Dependency Injection) عالی را برای شما فراهم می کند. این امکان به شما اجازه می دهد که یک بخش از برنامه اصلی خود را به صورت یک component بنویسید و سپس آن را در بخش های مختلف برنامه تزریق کنید بدون اینکه نگران تغییرات، تست و ... باشید.
•    value
•    factory
•    service
•    provider
•    constant

value

value یک شی ساده جاوا اسکریپت است، در فاز تنظیمات این شی برای انتقال مقادیر به کنترلر مورد استفاده قرار می گیرد.

//define a module
var mainApp = angular.module("mainApp", []);
//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...
//inject the value in the controller using its name "defaultInput"
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
      $scope.number = defaultInput;
      $scope.result = CalcService.square($scope.number);

      $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

factory

Factory یک تابع سات که برای برگرداندن مقادیر (return) از آن استفاده می کنیم. این تابع مقادیر مورد نیاز یک سرویس و یا یک کنترلر را ایجاد می کند، معمولا از تابع Factory برا بازیابی و یا محاسبه مقادیر استفاده می شود.

//define a module
var mainApp = angular.module("mainApp", []);
//create a factory "MathService" which provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {     
   var factory = {};  
   factory.multiply = function(a, b) {
      return a * b 
   }
   return factory;
}); 

//inject the factory "MathService" in a service to utilize the multiply method of factory.
mainApp.service('CalcService', function(MathService){
      this.square = function(a) { 
      return MathService.multiply(a,a); 
   }
});
...

service

سرویس یک شی javascript شامل یک مجموعه از توابع می باشد که کارهای مشخصی را انجام می دهد. سرویس ها توسط تابع service() تعریف می شوند و درون controller ها تزریق می شوند.

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service which defines a method square to return square of a number.
mainApp.service('CalcService', function(MathService){
      this.square = function(a) { 
      return MathService.multiply(a,a); 
   }
});
//inject the service "CalcService" into the controller
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
      $scope.number = defaultInput;
      $scope.result = CalcService.square($scope.number);

      $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

provider

provider توسط AngularJS به صورت داخلی برای ایجاد سرویس و Factory مورد استفاده قرار می گیرد. در فاز تنظیم برنامه ( منظور همان مرحله ای است که AngularJS در حال آماده سازی نیازمندی های خود برای اجرای برنامه است). اسکریپ مشخص شده زیر می تواند برای ساخت MathService که ما قبلا آن را ایجاد کردیم مورد استفاده قرار گیرد.
provider یک متد factory مشخص به همراه تابع ()get است که برای برگرداندن (return) کردن value/service/factory استفاده می شود.

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

constant

با توجه به این نکته که در فاز تنظیم برنامه مقادیر نمی توانند انتقال داده شوند از constant ها برای انتقال مقادیر در فاز تنظیم استفاده می شود.

mainApp.constant("configParam", "constant value");

مثال
مثال زیر تمامی رهنمودهای بالا را به نمایش می گذارد:

<html>
<head>
   <title>AngularJS Dependency Injection</title>
</head>
<body>
   <h2>AngularJS Sample Application</h2>
   <div ng-app="mainApp" ng-controller="CalcController">
      <p>Enter a number: <input type="number" ng-model="number" />
      <button ng-click="square()">X<sup>2</sup></button>
      <p>Result: {{result}}</p>
   </div>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
   <script>
      var mainApp = angular.module("mainApp", []);
	  
      mainApp.config(function($provide) {
         $provide.provider('MathService', function() {
            this.$get = function() {
               var factory = {};  
               factory.multiply = function(a, b) {
                  return a * b; 
               }
               return factory;
            };
         });
      });

      mainApp.value("defaultInput", 5);

      mainApp.factory('MathService', function() {     
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      }); 

      mainApp.service('CalcService', function(MathService){
            this.square = function(a) { 
            return MathService.multiply(a,a); 
         }
      });

      mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
            $scope.number = defaultInput;
            $scope.result = CalcService.square($scope.number);

            $scope.square = function() {
            $scope.result = CalcService.square($scope.number);
         }
      });
   </script>
</body>
</html>

کد بالا را ذخیره و آن را اجرا کنید.

مشاهده تمامی آموزش های دوره AngularJS