سرویس ها در angular

سرویس ها توابع یا object هایی می باشند که مختص برنامه بوده و هریک از آنها برای هدف خاصی طراحی شده اند. در انگولار حدود 30 سرویس بصورت پیش فرض وجود دارد و در صورت نیاز می توانید سرویس های دیگری را نیز ایجاد و استفاده نمایید. هر سرویس دارای متدهایی بصورت پیش فرض می باشد که توسط آنها می توان عملیات مختلف را انجام داد.

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

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

app.controller("myController", function ($scope,$location) {
      
});

دراین بخش به معرفی مهمترین آنها می پردازیم.

$location

از این سرویس برای کار با آدرس های اینترنتی (url) استفاده می شود. این سرویس دارای متدی به نام absUrl می باشد که توسط آن می توان آدرس صفحه جاری را استخراج نمود.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Angular Tutorial</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
<body ng-app="benoApp">
  <div ng-controller="myController">
    Current Url is : {{currentUrl}}
  </div>
  <script>
    var app = angular.module("benoApp", []);
    app.controller("myController", function ($scope,$location) {
      $scope.currentUrl = $location.absUrl();
    });
  </script>
</body>
</html>

$http

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

<script>
  var app = angular.module("benoApp", []);
  app.controller("myController", function ($scope,$http) {
    $http.get(url).then(function(){
      //دستورات
    });
  });
</script>

در کدهای فوق منظور از url استفاده شده در متد get، آدرسی می باشد که قصد دارید اطلاعاتی را از آن دریافت که معمولا آدرس یک API برای آن تعیین می گردد. به دلیل اهمیت و کاربرد بسیار زیاد این سرویس، نحوه استفاده و کار با آن را در مقاله جداگانه ای شرح خواهیم داد.

$timeout

عملکرد این سرویس همانند setTimeout جاوا اسکریپت می باشد و از آن برای اجرای دستورات پس از بازه زمانی تعیین شده استفاده می شود.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Angular Tutorial</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
<body ng-app="benoApp">
  <div ng-controller="myController">
    Message is : {{message}}
  </div>
  <script>
    var app = angular.module("benoApp", []);
    app.controller("myController", function ($scope,$timeout) {
      $timeout(function () {
          $scope.message = "Welcome to benoacademy";
      }, 2000);
    });
  </script>
</body>
</html>

با اجرای دستورات فوق مشاهده می کنید که پس از بازه زمانی تعیین شده (2 ثانیه) پیغام نمایش داده می شود.

$interval

عملکرد این سرویس همانند تابع setInterval در جاوا اسکریپت بوده و از آن برای تکرار دستورات در بازه زمانی تعیین شده استفاده می شود. برای مثال اگر قصد داشته باشید زمان جاری سیستم را نمایش دهید بطوریکه هر ثانیه به روز رسانی شود، می توانید از $interval به شکل زیر استفاده نمایید.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Angular Tutorial</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
<body ng-app="benoApp">
  <div ng-controller="myController">
    Time : {{time}}
  </div>
  <script>
    var app = angular.module("benoApp", []);
    app.controller("myController", function ($scope,$interval) {
      $interval(function () {
          $scope.time = new Date().toLocaleTimeString();;
      }, 1000);
    });
  </script>
</body>
</html>