دوره آموزشی AngularJS به زبان فارسی - بخش نوزدهم
بسم الله الرحمن الرحیم
این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و Angular.js " مراجعه کنید.
مشاهده تمامی آموزش های دوره AngularJS
آموزش AngularJS
بخش نوزدهم
AngularJS Services
AngularJS به وسیله معماری سرویس از مفهوم جدا سازی ارتباطات پشتیبانی می کند. سرویس ها توابع javascript ایی هستند که فقط برای پاسخ گویی به کارهای خاص مورد استفاده قرار می گیرند. این باعث می شود کارها به صورت موجودیت های جدا در نظر گرفته شوند و که این همان قابلیت تست و نگه داری است (maintainable و testable). کنترلر ها و فیلتر ها می توانند در صورت نیاز سرویس ها را فراخوانی کنند. سرویس معمولا توسط معماری تزریق وابستگی (dependency injection) AngularJS در بخش های مختلف تزریق می شوند.
AngularJS برخی از سرویس های داخلی از پیش تعریف شده مانند $http, $route, $window, $location و غیره را برای ما فراهم می کند. هر سرویس برای یک کار خاص قابل پاسخگویی است. $http برای دریافت اطلاعات به صورت ajax مورد استفاده قرار می گیرد. $route برای مسیریابی اطلاعات و کارهای مشابه آن مورد استفاده قرار می گیرد.
یادتان باشد سرویس های داخلی از پیش تعریف شده AngularJS با علامت $ شروع می شوند. دو راه برای ساخت سرویس وجود دارد.
• factory
• service
استفاده از متد factory
در استفاده از متد factory، در ابتدا ما متد factory را تعریف می کنیم و سپس متد خود را آن را به انتقال می دهیم.
var mainApp = angular.module("mainApp", []);
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);
}
});
مثال
در مثال زیر تمام مواردی که در بالا معرفی شده اند، بیان شده اند.
<html>
<head>
<title>Angular JS Forms</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.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) {
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
</script>
</body>
</html>
کد بالا را ذخیره و اجرا کنید.
تفاوت متد factory و Service
Factory به شما اجازه می دهد منطق خود را قبل از ایجاد ساخت اشیاء پیاده سازی کنید و Service با استفاده از کلمه new به شما اجازه می دهد اشیایی از سرویس خود ایجاد کنید و به وسیله this به سرویس خود می توانید property اضافه کنید.
در این جا نیز یک مثال وجود دارد که می توانید از آن نیز برای درک بهتر موضوع استفاده کنید.
مثال تفاوت متد factory و Service
مشاهده تمامی آموزش های دوره AngularJS
نظرات (۱)
با عرض سلام
در مقاله بخشی را برای مقایسه service و factory اضافه کردم که می توانید آن را مطالعه کنید.
موفق باشید