خدمات 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 الخاص بك.

يöverض 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 = "مرحبًا بالعالم!";
  $timeout(function () {
    $scope.myHeader = "كيف حالك اليوم؟";
  }, 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);
});

جرب بنفسك

استخدام خدمة مخصصة في مصفى

بعد إنشاء الخدمة وتوصيلها إلى تطبيقك، يمكنك استخدام هذه الخدمة في أي مستخدم أو تعليمات أو مصفى أو حتى خدمات أخرى.

لإضافة الخدمة إلى المصفى، قم بإضافتها كاعتماد عند تعريف المصفى:

خدمة hexafy المستخدمة في مصفى myFormat:

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

جرب بنفسك

يمكنك استخدام هذا المصفى لعرض القيم في العناصر أو الأنواع المعرضة:

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

جرب بنفسك