خدمات AngularJS

در AngularJS، می‌توانید خدمات خود را ایجاد کنید یا از یکی از خدمات داخلی بسیاری استفاده کنید.

چه چیزی خدمت است؟

در AngularJS، خدمات می‌توانند به عنوان تابع یا شیء باشند که می‌توانند برای و فقط در برنامه AngularJS شما استفاده شوند.

AngularJS حدود 30 خدمت داخلی دارد. یکی از آن‌ها است $location خدمت.

$location خدمت روش‌هایی دارد که می‌توانند اطلاعات مربوط به موقعیت فعلی صفحه وب را بازگردانند:

مثال

استفاده از خدمت $location در کنترل‌گر:

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

به طور مستقیم امتحان کنید

لطفاً توجه داشته باشید که$location خدمات به عنوان پارامتر به کنترل‌گرها منتقل می‌شوند. برای استفاده از این خدمت در کنترل‌گر، باید آن را به عنوان وابستگی تعریف کنید.

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

برای بسیاری از خدمات مانند $location خدمت، به نظر می‌رسد که می‌توانید از اشیاء موجود در DOM (مثلاً شیء window.location)، اما برخی محدودیت‌ها نیز خواهد داشت، حداقل برای برنامه AngularJS شما اینگونه است.

AngularJS به طور مداوم برنامه شما را نظارت می‌کند، تا بتواند تغییرات و رویدادها را به درستی پردازش کند، بنابراین AngularJS ترجیح می‌دهد که شما از $location خدمت به جای شیء window.location.

خدمت $http

این مثال نمایش می‌دهد که خدمت یکی ازخدمات بسیار استفاده شده در برنامه‌های AngularJS است. این خدمت درخواست‌ها را به سرور ارسال کرده و اجازه می‌دهد تا برنامه شما پاسخ‌ها را پردازش کند.

مثال

از طریق خدمات $http داده‌ها را از سرور درخواست کنید:

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

به طور مستقیم امتحان کنید

$scope.myWelcome = response.data; این مثال نمایش می‌دهد که $http

استفاده بسیار ساده از سرویس $timeout. برای اطلاعات بیشتری در مورد سرویس $http در آموزش AngularJS Http مراجعه کنید.

$timeout سرویس AngularJS نسخه window.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 سرویس AngularJS نسخه window.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);
});

به طور مستقیم امتحان کنید

ایجاد سرویس خود

برای ایجاد سرویس خود، آن را به ماژول متصل کنید:

ایجاد سرویسی به نام hexafy سرویس:

app.service('hexafy', function() {
  this.myFunc = function (x) {
    return x.toString(16);
  }
});

برای استفاده از سرویس سفارشی خود، آن را به عنوان وابسته در تعریف کنترل‌گر اضافه کنید:

مثال

استفاده از سرویس سفارشی به نام hexafy برای تبدیل عدد به عدد شانزده‌ای:

app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});

به طور مستقیم امتحان کنید

استفاده از سرویس‌های سفارشی در فیلتر

سرویس را ایجاد کنید و آن را به برنامه خود متصل کنید، سپس می‌توانید آن را در هر کنترل‌گر، دستورالعمل، فیلتر یا حتی سرویس دیگر استفاده کنید.

برای استفاده از سرویس در فیلتر، آن را به عنوان وابستگی در تعریف فیلتر اضافه کنید:

سرویس مورد استفاده در فیلتر myFormat: hexafy

app.filter('myFormat',['hexafy', function(hexafy) {
  return function(x) {
    return hexafy.myFunc(x);
  });
});

به طور مستقیم امتحان کنید

می‌توانید از این فیلتر هنگام نمایش مقادیر در یک شیء یا آرایه استفاده کنید:

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

به طور مستقیم امتحان کنید