در این پست می خواهیم سرویس ها در AngularJS را بررسی کنیم. سرویس در AngularJS یک تابع یا یک شی می باشد که می تواند برای به اشتراک پذیری داده ها و رفتارشان در برنامه استفاده می شوند.

سرویس (Service) در AngularJS یک تابع یا یک شی می باشد که می تواند برای به اشتراک پذیری داده ها و رفتارشان درسرتاسر برنامه(Controller,directives,filters,و غیره) استفاده می شوند. یا می توانیم بگوییم که سرویس ها در AngularJS یک شی می باشد که با استفاده از(DI (dependency injection با یکدیگر مخابره می کنند و می تواند برای اشتراک گذاری و سازمان دادن کد در سراسر برنامه استفاده شود.

می توانیم فرض کنیم سرویس ها بعنوان یک شی یگانه هستند زیرا تنها یک نمونه از سرویس خاص دردسترس در طول عمر یک برنامه Angular  می باشد. آنها با استفاده از "injector$"  معرفی می شوند. عموما آنها یک inteface برای ایجاد یک گروه منطقی از متدهای مربوط با یکدیگر به یک تابع خاص فراهم می کنند.

دو ویژگی از AngularJS Service

Lazy instantiated: برنامه Angular JS یک سرویس را معرفی می کند وقتی هر برنامه به آن وابسته می باشند.

Singletons: تمام کامپوننت ها، وابسته به یک سرویس برای یک نمونه یک مرجع ایجاد شده توسط سرویس factory بدست می آورد.

ساختار برنامه Idle AngularJS

کنترلر مسئول پر کردن با View با استفاده از scope$  و شامل بعضی از bussiness logic است. کنترل دارای هیچ گونه منطقی برای واکشی داده ها نمی باشد. سرویس AngularJS واکشی داده را مدیریت می کند. در برنامه AngularJS هر کامپوننتی مسئولیت های خود را دارد بطوریکه هر کامپوننت آزمون پذیر تر می باشد.

سرویس داخلی AngularJS

AngularJS داخلی سرویس های زیادی را ارائه می دهد که می تواند در برنامه استفاده شود. تمام سرویس AngularJS با علامت $ شروع می شوند.http, $route, $location, $window , $q$ و غیره سرویس های مفیدی هستند که توسط AngularJS ارائه شده است.

سرویس سفارشی AngularJS

با برنامه AngularJS ما می توانیم سرویس خود را تعریف کنیم و در هرجا که نیاز شد از آن استفاده کنیم. در اینجا روش های متفاوتی برای ایجاد سرویس در AngularJS وجود دارد. در زیر دو روش ساده برای ایجاد سرویس وجود دارد.

1- استفاده از کلیدواژه Service

استفاده از کلید واژه service ، آسان ترین روش برای ایجاد Service در AngularJS می باشد. در قطعه کد پایین، پارامتر دوم تابع service می باشد که ما در آن رفتار سرویس را تعریف می کنیم. زمانی که ما سرویس را تعریف می کنیم، می توانیم از این سرویس در هرجا توسط تزریق این سرویس بعنوان وابستگی استفاده کنیم.

Defining service without dependency:  
  
var app = angular.module('myapp', []);  
  
app.service('myTestService', function(){  
   // write your service here  
   // define variable and methods   
  
});

تعریف سرویس با وابستگی:

var app = angular.module('myapp', []);  
  
app.service('myTestService', ['$http', function($http){  
   // write your service here  
   // define variable and methods   
     
}]); 

2- استفاده از متد factory

به جای تعریف سرویس با استفاده از کلمه Service در ماژول Angular ما می توانیم از متد Factory استفاده کنیم و Service زمانی که توسط یک تابع Factory تعریف می شود، بر روی درخواست ایجاد خواهد شد. هدف سرویس Factory تولید شی مفرد می باشد که می تواند برای باقی برنامه استفاده شود.

تعریف سرویس بدون وابستگی

var app = angular.module('myapp', []);  
  
app. factory ('myTestService', function(){  
   // write your service here  
   // define variable and methods   
  
});  

تعریف سرویس با وابستگی

var app = angular.module('myapp', []);  
  
app.factory('myTestService', ['$http', function($http){  
   // write your service here  
   // define variable and methods   
  
}]);

مثالی از برنامه End to End با استفاده از سرویس AngularJS

اولین مرحله ایجاد برنامه AngularJS می باشد. قطعه کد زیر در ایجاد برنامه استفاده شده است. در این مثال، یک فایل JavaScript به نام app.js ایجاد کرده و کدهای زیر را در آن قرار می دهیم.

app.js  
var app = angular.module("myapp", []); 

مرحله دوم ایجاد سرویس و تعریف آن می باشد. در مثال، سرویس را در فایلی به نام appService.js ایجاد کردیم. کدهای زیر را در این فایل کپی کنید. در این شی سرویس AngularJS، یک تابع به نام add داریم. این تابع دو آرگومان را گرفته و جمع این دو عدد را برمی گرداند.

app Sevice.js

app.service('appService', function () {  
   this.add = function (a1, a2) {  
      return parseInt(a1) + parseInt(a2);  
   }  
})

مرحله سوم ایجاد شی کنترلر می باشد. کنترلر یک پل بین service و view می باشد. کنترلر، مقادیر هر دو textbox را با استفاده از scope$ به تابع service ارسال می کند.

appController.js

app.controller("appController", function ($scope, appService) {  
   $scope.Add = function () {  
      $scope.total = appService.add($scope.digit1, $scope.digit2);  
   }  
});

مرحله آخر ایجاد فایل HTML می باشد. در فایل HTML نیاز به ثبت تمام اسکریپت هایی که در کد بالا در قسمت head ساخته شده داریم. همچنین نیاز به فایل angular.js داریم. اکنون کدهای زیر را درون فایل html  کپی کنید.

فایل HTML 

<!DOCTYPE html>
<html>
<head>
    <title> AngularJS سرویس ها در</title>
    <script src="angular.js"></script>
    <script src="app.js"></script>
    <script src="appService.js"></script>
    <script src="appController.js"></script>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body ng-app="myapp">
    <h4>  AngularJS مثال سرویس در</h4>
      <div ng-controller="appController">
        <div width="100%" style="padding-top:10px;">
            <label>عدد اول  : </label><input type="text" name="number" ng-model="digit1" />
        </div>
        <div width="100%" style="padding-top:10px;">
            <label>عدد دوم : </label><input type="text" name="number" ng-model="digit2" />
        </div>
        <div width="100%" style="padding-top:10px;">
            <button ng-click="Add()">جمع</button>
        </div>
        <div width="100%" style="padding-top:10px;">
            <label>عدد اول + عدد دوم: </label><input type="text" name="number" ng-model="total" />
        </div>
    </div>
	</br>
	<div>
	<a href="http://www.barnamenevisan.org"> مرجع تخصصی برنامه نویسان</a>
	</div>
</body>
</html>

خروجی برنامه

آموزش angular