مشخصات مقاله
-
354
-
0.0
-
2235
-
0
-
0
الگوی طراحی Dependency injection
دوره آموزش SPA
کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.
الگوی طراحی Dependency injection
الگویی است جهت تزریق dependency خارجی یک کلاس به آن، به جای استفاده مستقیم از dependency ها در درون کلاس.
Dependency injection در واقع یک الگوی طراحی نرم افزار است که در آن dependency ها بجای اینکه داخل کامپوننت hardcode شوند، به آن ها تزریق می شوند. این کار باعث می شود کامپوننت ها از مکان یابی dependency رهایی یابند. همچنین dependency ها را قابل تنظیم (configurable) می سازد. این امر در نهایت باعث می شود کامپوننت ها قابلیت استفاده ی مجدد پیدا کنند، نگهداشت آن ها سهل شده و امکان تست آن ها فراهم آید.
همان طور که در مباحث پیشین یاد شد، AngularJS از این مکانیزیم بهترین بهره را می برد.
AngularJS کامپوننت های اصلی زیر را ارائه می دهد که این قابلیت دارند که به عنوان dependency به یکدیگر تزریق شوند.
- value
- factory
- service
- provider
- constant
Value
Value یک شی جاوا اسکریپت است که از آن برای ارسال مقادیر به controller طی مرحله ی پیکربندی (config phase) استفاده می شود.
//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
یک تابع است که به منظور بازگردانی مقدار بکار گرفته می شود، بدین معنا که به مجرد تقاضا و هرگاه که یک service یا controller درخواست کند، این تابع مقدار ایجاد می کند. بنابراین از تابع 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
Service یک شی تکی جاوا اسکریپت است که دربردارنده ی مجموعه ای از توابع بوده و وظایف (task) مشخصی را انجام می دهند. Service ها به وسیله ی تابع 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، service و factory را با هم ترکیب کرده و نیز قابلیت تنظیم تابع provider() را پیش از اینکه سیستم injection آماده شود، فراهم می آورد. به عبارتی دیگر provider توسط Angularjs به منظور ایجاد service و factory به صورت داخلی در طی مرحله ی تنظیم (مرحله ای که در آن Angularjs خود را راه اندازی/bootstrap می کند) به کار می رود. MathService که در مثال های پیشین از آن استفاده کردیم، توسط script مثال زیر ایجاد گردیده است. Provider یک تابع factory ویژه است که با استفاده از متد get() مقادیر 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 ها این قابلیت را فراهم می آورند.
Constantها به منظور ارسال مقادیر در طی مرحله ی پیکربندی (config) به کار می روند.
mainApp.constant("configParam", "constant value");
مثال
testAngularJS.htm
<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.3.14/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>
نتیجه
