سرویس ها (Services)

«سرویس های AngularJS» ابزارهای آماده یا سفارشی هستند. سرویس (Service) یعنی تابع یا شیء آماده برنامه. این سرویس ها کارهای تکراری را ساده می کنند. بنابراین کد تمیزتر می ماند و قابل اعتمادتر می شود.

سرویس چیست؟

سرویس های AngularJS فقط داخل برنامه فعال اند. مثلا سرویس $location آدرس صفحه را می دهد. وابستگی (Dependency) یعنی چیزی که کنترلر لازم دارد.

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
  $scope.myUrl = $location.absUrl();
});

مشاهده در ادیتور

چرا از سرویس ها استفاده کنیم؟

AngularJS تغییرات را رصد می کند. پس بهتر است از سرویس های خودش استفاده کنیم. مثلا به جای window.location از $location استفاده کن.

سرویس $http برای درخواست ها

سرویس $http درخواست می فرستد و پاسخ را برمی گرداند. پاسخ (Response) یعنی نتیجه سرور.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm").then(function(response) {
    $scope.myWelcome = response.data;
  });
});

مشاهده در ادیتور

سرویس $timeout؛ تاخیر زمانی

$timeout نسخه AngularJS از setTimeout است. پیام را بعدا عوض می کند.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Hello World!";
  $timeout(function() {
    $scope.myHeader = "How are you today?";
  }, 2000);
});

مشاهده در ادیتور

سرویس $interval؛ اجرای تکراری

$interval مانند setInterval عمل می کند. هر ثانیه زمان را تازه می کند.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function() {
    $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});

مشاهده در ادیتور

ساخت سرویس سفارشی

می توانیم سرویس خودمان را بسازیم. مثلا تبدیل عدد به هگز.

var app = angular.module('myApp', []);
app.service('hexafy', function() {
  this.myFunc = function(x) {
    return x.toString(16);
  };
});

مشاهده در ادیتور

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

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});

مشاهده در ادیتور

استفاده از سرویس داخل فیلتر

سرویس ها در فیلتر هم قابل استفاده اند. فیلتر خروجی را تغییر می دهد.

var app = angular.module('myApp', []);
app.service('hexafy', function() {
  this.myFunc = function(x) {
    return x.toString(16);
  };
});
app.filter('myFormat', ['hexafy', function(hexafy) {
  return function(x) {
    return hexafy.myFunc(x);
  };
}]);

مشاهده در ادیتور

حالا فیلتر را روی مقادیر یک آرایه اعمال کن. نتیجه هگز می شود.

<ul>
  <li ng-repeat="x in counts">{{ x | myFormat }}</li>
</ul>

مشاهده در ادیتور

گام های عملی

1. ماژول بساز و کنترلر تعریف کن.
2. سرویس لازم را تزریق کن.
3. متد سرویس را صدا بزن.
4. در صورت نیاز سرویس سفارشی بساز.

نکته: برای فیلترها به فیلترهای AngularJS برو. برای محدوده داده ها به اسکوپ ها مراجعه کن.

جمع بندی سریع

• سرویس ها کار مشترک را متمرکز می کنند.
• وابستگی ها را در کنترلر تزریق کن.
• $http برای درخواست ها عالی است.
• $timeout و $interval برای زمان بندی اند.
• می توانی سرویس سفارشی بسازی.