في 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 المتشعب التعليمي .
خدمة $ المهلة
و $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);
};
}]);
انها محاولة لنفسك » يمكنك استخدام فلتر عند عرض القيم من كائن، أو صفيف:
إنشاء خدمة اسمه hexafy :
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
انها محاولة لنفسك »