سرویس ها در آنگولار جی اس

در این مقاله به بررسی سرویس ها در آنگولارجی اس می پردازیم.

آموزش طراحی سایت

شما میتوانید در آنگولار، سرویس های خود را ایجاد و یا از سرویس های موجود استفاده کنید.

سرویس چیست؟

در آنگولارجی است ، سرویس یک عملگر یا شیئ است که در محدوده نرم افزار شما قابل اجرا است.

آنگولار جی اس حدود 30 سرویس built-in services دارد . یکی از آنها سرویس $location است.

مثال:

استفاده از سرویس $location در یک کنترلر:

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

مشاهده نتیجه

نکته : سرویس $location همراه با آروگمان متوقف میگردد. بنابراین باید سرویس را در ارتباط با آروگمان نوشت

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

برای خیلی از سرویس ها مانند سرویس $location مانند استفاده از این امکان توسط DOM است درست مانند استفاده از شیئ window.location ولی اینکار ممکن است برای کار در آنگولار جی است محدودیت ایجاد کند. بنابراین این دستور را در همان آنگولار ایجاد می کنیم.

آنگولار جی است پیشنهاد میدهد که از سرویس $location بجای شیئ window.location استفاده کنیم.

سرویس $http :

سرویس $http یکی از پرکاربردترین سرویس ها در آنگولارجی اس است . سرویس یک تقاضا به سرور ارسال می کند. و شما امکان عکس العمل به پاسخ سرور را خواهید داشت .

مثال:

استفاده از سرویس $http برای ارسال درخواست به سرور :

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

مشاهده نتیجه

در آموزش بعدی درباره این سرویس بیشتر توضیح میدهیم.

سرویس $timeout

این سرویس نسخه آنگولار از عملگر 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 یک نسخه آنگولارجی اس از عملگر 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);
});