در 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 مانند object object 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;
});
});
سرویس $timeout
سرویس $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);
});
از یک سرویس سفارشی در داخل یک فیلتر استفاده کنید. هنگامی که یک سرویس ایجاد کرده اید و آن را به برنامه خود وصل کرده اید، می توانید از سرویس در هر کنترل کننده، دستورالعمل، فیلتر یا حتی درون سرویس های دیگر استفاده کنید.
برای استفاده از سرویس درون فیلتر، هنگام تعریف فیلتر، آن را به عنوان وابستگی اضافه کنید:
سرویس 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>