با سلام در قسمت دهم از انگولار جی اس به بررسی سرویس‌های انگولار می‌پردازیم پیشنهاد می‌شود سایر قسمت‌های دوره انگولار جی اس را نیز مطالعه فرمایید.
سرویس‌های انگولار ( angular services )
در انگولار شما می‌توانید سرویس‌های(خدمات) خود را بسازید و یا به‌سادگی از خدمات که ساخته‌شده‌اند استفاده کنید.
منظور از سرویس‌های انگولار جی اس چیست ؟
در AngularJS یک سرویس یک تابع یا شیء است که برای برنامه AngularJS شما در دسترس است و محدود به آن است.
AngularJS دارای حدود 30 سرویس ساخته‌شده است. یکی از آنها خدمات موقعیت مکانی ($location) است.
خدمات $location روش‌هایی دارد که اطلاعات مربوط به مکان صفحه وب فعلی را باز می‌کند. برای درک بهتر این موضوع به مثال زیر توجه فرمایید:
از خدمات $location در کنترل‌کننده استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 |
<div ng-app="myApp" ng-controller="myCtrl"> <p>محلی که در ان هستید :</p> <h3>{{myUrl}}</h3> </div> < script > var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl(); }); </script> |
توجه داشته باشید که خدمات $location به‌عنوان یک بحث به کنترل‌کننده منتقل می‌شود. برای استفاده از خدمات در کنترل‌کننده، باید به‌عنوان وابستگی تعریف شود.
چرا از سرویس‌های انگولار استفاده کنیم ؟
برای بسیاری از سرویس‌های، مانند خدمات $location به نظر می‌رسد که شما می‌توانید از اشیایی که قبلاً در DOM مانندشی window.location هستند استفاده کنید، اما می‌توانید بعضی محدودیت‌ها، حداقل‌ها را نیز برای برنامه‌ی AngularJS خود داشته باشید.
AngularJS به‌طور مداوم برنامه شمارا تحت نظارت قرار می‌دهد و برای آنکه به‌درستی رفتار و رویدادها را مرتفع کند، AngularJS ترجیح می‌دهد که از محل خدمات $location به‌جای شیء window.location استفاده کنید.
سرویس $http
خدمات $http یکی از خدمات بسیار رایج در سرویس‌های اپلیکیشن انگولار جی است می‌باشد. خدمات $http سرویس درخواستی را به سرور می‌فرستد و اجازه می‌دهد برنامه شما پاسخ را پاسخ دهد.
از خدمات $http برای درخواست داده ها از سمت سرور به شکل زیر استفاده کنید :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div ng-app="myApp" ng-controller="myCtrl"> <p>پیام تبریک امروز:</p> <h1>{{myWelcome}}</h1> </div> < 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 ورژن انگولاری از تابع window.setTimeout می‌باشد.
در مثال زیر پیامی بعد از دو ثانیه ظاهر می‌شود:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div ng-app="myApp" ng-controller="myCtrl"> <p>پیام شما بعد از دو ثانیه عوض خواهد شد:</p> <h1>{{myHeader}}</h1> </div> < script > var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $timeout) { $scope.myHeader = "سلام دنیا!"; $timeout(function () { $scope.myHeader = "از اموزش کدپز رضایت دارید ?"; }, 2000); }); </script> |
سرویس $interval
$interval در انگولار ورژن انگولاری از تابع window.setInterval می‌باشد.
در مثال زیر در هر ثانیه زمان تغییر می‌کند:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div ng-app="myApp" ng-controller="myCtrl"> <p>ساعت:</p> <h1>{{theTime}}</h1> </div> < 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 می‌سازیم.
|
1 2 3 4 5 |
app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); } }); |
برای استفاده از خدمات سفارشی ساخته‌شده خود، هنگام تعریف کنترل‌کننده، آن را به‌عنوان وابستگی اضافه کنید:
از خدمتی که خودمان ساختیم برای تبدیل اعداد معمولی به اعداد هگزادسیمال استفاده می‌شود:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div ng-app="myApp" ng-controller="myCtrl"> <p>معادل هگزادسیمال عدد 255 :</p> <h1>{{hex}}</h1> </div> < 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> |
استفاده از سرویس در فیلتر
هنگامی‌که شما خدمتی برای خود می‌سازید و آن را به اپلیکیشن خود متصل می‌کنید، شما می‌توانید در کنترل‌کننده، دستورالعمل، فیلترها و یا حتی داخل سرویس‌های دیگر نیز از آن استفاده کنید.
برای استفاده از خدمات درون فیلتر، هنگام تعریف فیلتر، آن را به‌عنوان وابستگی اضافه کنید:
hexafy خدمات مورداستفاده در فیلتر myFormat:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div ng-app="myApp"> تبدیل عدد 255 با استفاده از سرویس پیش ساخته شده در فیلتر ها : <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> |
شما می‌توانید از فیلتر هنگام نمایش مقادیر از یکشی یا یک آرایه استفاده کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div ng-app="myApp" ng-controller="myCtrl"> <p>استفاده از فیلتر برای تبدیل ارایه [255, 251, 200] به هگزادسیمال:</p> <ul> <li ng-repeat="x in counts">{{x | myFormat}}</li> </ul> </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> |
شما با موفقیت به انتهای جلسه‌ی دهم از آموزش‌های انگولار جی اس رسیدید امیدوارم که از این سری آموزش‌های کدپز نیز رضایت کامل داشته باشید.
موفق باشید.
