خدمات 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 $
الخدمة $httpهي واحدة من أكثر الخدمات المستخدمة شيوعًا في تطبيقات AngularJS. تقدم الخدمة طلبًا إلى الخادم ، وتتيح لتطبيقك معالجة الاستجابة.
مثال
استخدم $httpالخدمة لطلب البيانات من الخادم:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
});
يوضح هذا المثال استخدامًا بسيطًا جدًا $httpللخدمة. تعرف على المزيد حول $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هي نسخة 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>