سرویس ها در AngularJS

سرویس ها در AngularJS

شما در AngularJS می توانید سرویس شخصی برای خودتان بسازید و یا از سرویس های پیش ساخته زیادی که در اختیار دارید، استفاده کنید.

سرویس چیست؟

در AngularJS ، سرویس یک تابع و یا object است که برای برنامه کاربردی AngularJS قابل دسترس و یا محدود شده باشد. AngularJS حدود 11 سرویس پیش ساخته شده دارد که یکی از آنها، سرویس location$ می‌باشد. سرویس location$ دارای متدهایی است که اطلاعات موقعیت مکانی را به صفحه وب (Web page) ارسال می‌کند. در مثال زیر از location$ به عنوان یک Controller استفاده شده است:

<div ng-app="myApp" ng-controller="myCtrl"> <p>The url of this page is:</p> <h3>{{myUrl}}</h3> </div> <p>This example uses the built-in $location service to get the absolute url of the page.</p> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope, $location) { $scope.myUrl = $location.absUrl(); }); </script>

به خاطر داشته باشید که سرویس location$ به عنوان یک argument در Controller تعریف می‌شود. به منظور استفاده از سرویس در Controller باید آن را به صورت وابسته تعریف کرد.

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

سرویس location$ را در نظر بگیرید. به نظر می‌رسد که به جای آن می‌توان از object‌هایی که در DOM هستند مانند window.location استفاده کرد – البته می‌توان این کار را انجام داد – اما در برنامه AngularJS ، شما محدودیت‌هایی خواهید داشت. AngularJS دائما برنامه شما را نظارت می‌کند و برای مدیریت تغییرات و ویژگی‌های رخدادها، ترجیح می‌دهد شما از location$ به جای window.location استفاده کنید.

سرویس http$

سرویس http$ یکی از سرویس‌های پرکاربرد در برنامه‌های AngularJS می‌باشد.این سرویس یک درخواست به سرور ارسال می‌کند و به شما اجازه می‌دهد پاسخ برگشتی را مدیریت کنید.در مثال بسیار ساده زیر از سرویس http$ برای ارسال درخواست به سرور استفاده شده است.

<div ng-app="myApp" ng-controller="myCtrl"> <p>Today's welcome message is:</p> <h1>{{myWelcome}}</h1> </div> <p>The $http service requests a page on the server , and the response is set as the value of the "myWelcome" variable.</p> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope, $http) { $http.get("welcome.htm").then(function (response) { $scope.myWelcome = response.data; }); }); </script>

سرویس timeout$

سرویس timeout$ نمونه Angular تابع window.setTimeout می‌باشد. در مثال زیر بعد از دو ثانیه، یک پیغام جدید به نمایش در خواهد آمد.

<div ng-app="myApp" ng-controller="myCtrl"> <p>This header will change after two seconds:</p> <h1>{{myHeader}}</h1> </div> <p>The $timeout service runs a function after a sepecified number of milliseconds.</p> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope, $timeout) { $scope.myHeader = "Hello World!"; $timeout(function () { $scope.myHeader = "How are you today?"; }, 2000); }); </script>

سرویس interval$

سرویس interval$ نمونه Angular تابع window.setInterval می‌باشد. در مثال زیر در هر ثانیه، زمان را نمایش خواهد داد.

<div ng-app="myApp" ng-controller="myCtrl"> <p>The time is:</p> <h1>{{theTime}}</h1> </div> <p>The $interval service runs a function every specified millisecond.</p> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope, $interval) { $scope.theTime = new Date().toLocaleTimeString(); $interval(function () { $scope.theTime = new Date() .toLocaleTimeString(); }, 1000); }); </script>

ساختن سرویس شخصی

برای ساختن یک سرویس شخصی، سرویس خود را به ماژول متصل کنید. در مثال زیر یک سرویس به نام hexafy می‌سازیم:

app.service('hexafy', function () { this.myFunc = function (x) { return x.toString(16); } });

زمانی که یک فیلتر تعریف می‌کنید، برای استفاده از سرویس شخصی ساخته شده‌ی خود، آن را به صورت وابسته اضافه کنید. در مثال زیر، برای تبدیل عدد صحیح به عدد هگزا دسیمال، از سرویس hexafy که قبلا ساختیم استفاده کرده ایم.

<div ng-app="myApp" ng-controller="myCtrl"> <p>The hexadecimal value of 255 is:</p> <h1>{{hex}}</h1> </div> <p>A custom service whith a method that converts a given number into a hexadecimal number.</p> <script> var app = angular.module('myApp', []); app.service('hexafy', function () { this.myFunc = function (x) { return x.toString(16); } }); app.controller('myCtrl', function ($scope, hexafy) { $scope.hex = hexafy.myFunc(255); }); </script>

استفاده کردن از یک سرویس دلخواه داخل یک فیلتر

زمانی که شما یک سرویس را طراحی می‌کنید و آن را به برنامه خود متصل می‌کنید، می‌توانید از آن در هر controller، directive ، filter و یا حتی داخل سرویس های دیگر استفاده کنید. برای استفاده از سرویس داخل یک فیلتر، بعد از تعریف کردن فیلتر، سرویس را به صورت وابسته به آن اضافه کنید. در مثال زیر از سرویس hexafy داخل فیلتر myFormat استفاده شده است.

<div ng-app="myApp"> Convert the number 255, using a custom made service inside a custom made filter: <h1>{{255 | myFormat}}</h1> </div> <script> var app = angular.module('myApp', []); app.service('hexafy', function () { this.myFunc = function (x) { return x.toString(16); } }); app.filter('myFormat', ['hexafy', function (hexafy) { return function (x) { return hexafy.myFunc(x); }; }]); </script>

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

<div ng-app="myApp" ng-controller="myCtrl"> <p>Use a filter when displayin the array [255, 251, 200]:</p> <ul> <li ng-repeat="x in counts">{{x | myFormat}}</li> </ul> <p>This filter uses a service that converts numbers into hexadecimal values.</p> </div> <script> var app = angular.module('myApp', []); app.service('hexafy', function () { this.myFunc = function (x) { return x.toString(16); } }); app.filter('myFormat', ['hexafy', function (hexafy) { return function (x) { return hexafy.myFunc(x); }; }]); app.controller('myCtrl', function ($scope) { $scope.counts = [255, 251, 200]; }); </script>



نظرات کاربران



عبارت امنیتی : حاصل 7 × 5 می شود :
متن پیام :