سرویس های AngularJS

در AngularJS شما می توانید سرویس خود را داشته باشید و یا از چندین و چند سرویس از قبل ساخته شده استفاده کنید.

سرویس AngularJS چیست؟

در AngularJS ، سرویس یک متد یا شی است که در دسترس برنامه AngularJS قرار می گیرد و یا آن را محدود می کند.

AngularJS حدود سرویس از قبل ساخته شده دارد. یکی از آن ها سرویس location$ اصت.

سرویس location$ متد هایی را در خود دارد که اطلاعاتی را درباره صفحه وب جاری بر می گردانند:

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

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

یاد آوری کنیم که سرویس location$ به کنترلر بصورت آرگومان ارسال می گردد.

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

برای بسیاری از سرویس ها منجمله location$ به نظر می رسد همانگونه که شما از شی windows.location هم اکنون در DOM استفاده می کنید ، می توانید از سرویس ها نیز استفاده کنید ، اما یک سری محدودیت هایی نیز وجود دارد. AngularJS بطور مداوم بر برنامه شما نظارت دارد ، و تغییرات و رویداد ها رو مدیریت می کند. AngularJS ترجیح میدهید شما از location& بجای شی windows.location استفاده کنید.

سرویس http$ در AngularJS

سرویس 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$ در درس http در AngularJS بیشتر خواهیم آموخت.

سرویس timeout$ در AngularJS

سرویس timeout$ ورژن AngularJS شده تابع window.timeout است.

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

سرویس 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);
});

سرویس AngularJS خود را بسازید

برای اینکه بتوانیم سرویس AngularJS خود را بسازیم باید سرویس را به module مرتبط کنیم:

برای استفاده از سرویس سفارشی سازی شده، یک dependency  به زمان تعریف کنترلر ایجاد می کنیم :

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

استفاده از سرویس سفارشی سازی شده درون فیلتر AngularJS

ابتدا شما یک سرویس ایجاد می کنید و به برنامه AngularJS متصل می شوید ، شما می توانید از این سرویس در هر کنترلر، دستورالعل و یا فیلتر و یا حتی سرویس دیگری که می خواهید استفاده کنید.

برای استفاده از سرویس درون فیلتر یک dependency زمان تعریف فیلتر ایجاد میکنید.

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

شما می توانید از فیلتر زمان نمایش مقادیری از یک شی  یا یک آرایه استفاده کنید :

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