service ها در آنگولار جی اس – angular js services

در AngularJS شما می توانید خدمات خود را، و یا استفاده از یکی از بسیاری از خدمات داخلی ساخته شده توسط angular js ایجاد کنید.
مقالات
یک سرویس service چیست؟
در AngularJS یک (service) سرویس یک تابع یا شی است که برای برنامه AngularJS شما در دسترس است و محدود به آن است.
AngularJS دارای حدود 30 سرویس (service) ساخته شده است. یکی از آنها خدمات location$ است.
خدمات location$ روش هایی را ارائه می دهد که اطلاعات مربوط به مکان صفحه وب فعلی را باز می گرداند:
از سرویس موقعیت location$ در controlاستفاده کنید:
1 2 3 4 |
var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl(); }); |
توجه داشته باشید که سرویس موقعیت مکانی به عنوان یک آرگومان (argumant) به کنترل کننده منتقل می شود. برای استفاده از سرویس در کنترل کننده، باید به عنوان وابستگی تعریف شود.
چرا باید از سرویس service استفاده کنیم؟
برای بسیاری از خدمات، مانند سرویس موقعیت location$، به نظر می رسد که شما می توانید از اشیائی که قبلا در DOM مانند شی window.location هستند استفاده کنید، اما می توانید بعضی محدودیت ها را حداقل برای برنامه AngularJS خود داشته باشید.
AngularJS به طور مداوم برنامه شما را تحت نظارت قرار می دهد و برای آنکه رویدادهارا به درستی انجام دهد، AngularJS ترجیح می دهد که ازسرویس location$ به جای object.location استفاده کند.
سرویس HTTP با $http
سرویس HTTP یکی از رایج ترین سرویس های استفاده شده در برنامه های AngularJS می باشد.این سرویس درخواستی (request) را به سرور می فرستد و اجازه می دهد که برنامه شما درخواست را پاسخ دهد.
مثال:
از سرویس $http برای درخواست داده ها از سرور استفاده کنید:
1 2 3 4 5 6 |
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm").then(function (response) { $scope.myWelcome = response.data; }); }); |
این مثال استفاده بسیار ساده از سرویس $ http را نشان می دهد.
سرویس $timeout
سرویس $timeout نسخه نسخه AngularJS از عملکرد window.setTimeout است.
مثال:
یک پیام جدید پس از دو ثانیه نمایش داده می شود:
1 2 3 4 5 6 7 |
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $timeout) { $scope.myHeader = "Hello World!"; $timeout(function () { $scope.myHeader = "How are you today?"; }, 2000); }); |
سرویس interval$
سرویس interval$ نسخه AngularJS از عملکرد window.setInterval است.
نمایش زمان هر ثانیه:
1 2 3 4 5 6 7 |
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $interval) { $scope.theTime = new Date().toLocaleTimeString(); $interval(function () { $scope.theTime = new Date().toLocaleTimeString(); }, 1000); }); |
ایجاد سرویس خودتان
برای ایجاد سرویس خود، سرویس خود را به ماژول وصل کنید:
یک سرویس به نام hexafy ایجاد کنید:
1 2 3 4 5 |
app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); } }); |
برای استفاده از خدمات سفارشی ساخته شده خود، هنگام تعریف کنترل کننده، آن را به عنوان وابستگی اضافه کنید:
مثال:
از یک سرویس سفارشی به نام hexafy برای تبدیل یک عدد به یک عدد هگزادسیمال استفاده کنید:
1 2 3 |
app.controller('myCtrl', function($scope, hexafy) { $scope.hex = hexafy.myFunc(255); }); |
از یک سرویس سفارشی در داخل یک فیلتر استفاده کنید
هنگامی که یک سرویس ایجاد کرده اید و آن را به برنامه خود وصل کرده اید، می توانید از سرویس در controller, directive, filter, یا حتی درون سرویس های دیگر استفاده کنید.
برای استفاده از سرویس درون filter، هنگام تعریف فیلتر، آن را به عنوان وابستگی (dependency )اضافه کنید:
hexafy سرویس مورد استفاده در فیلتر myFormat:
1 2 3 4 5 |
app.filter('myFormat',['hexafy', function(hexafy) { return function(x) { return hexafy.myFunc(x); }; }]); |
شما می توانید از فیلتر هنگام نمایش مقادیر از یک شی یا یک آرایه استفاده کنید:
یک سرویس به نام hexafy ایجاد کنید:
1 2 3 |
<ul> <li ng-repeat="x in counts">{{x | myFormat}}</li> </ul> |
دیدگاهتان را بنویسید