با سلام در قسمت دهم از انگولار جی اس به بررسی سرویس های انگولار می پردازیم پیشنهاد میشود سایر قسمت های دوره انگولار جی اس را نیز مطالعه فرمایید.
سرویس های انگولار ( angular services )
در انگولار شما میتوانید سرویس های(خدمات) خود را بسازید و یا به سادگی از خدمات که ساخته شده اند استفاده کنید.
منظور از سرویس‌های انگولار جی اس چیست ؟
در AngularJS یک سرویس یک تابع یا شیء است که برای برنامه AngularJS شما در دسترس است و محدود به آن است.
AngularJS دارای حدود ۳۰ سرویس ساخته شده است. یکی از آنها خدمات موقعیت مکانی ($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> |
شما با موفقیت به انتهای جلسه ی دهم از اموزش های انگولار جی اس رسیدید امیدوارم که از این سری اموزش های کدپز نیز رضایت کامل داشته باشید.
موفق باشید.
