مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. بعد از ارائه آموزش پر کاربرد آشنایی با فیلترهای AngularJS ، در ادامه ی آموزشهای AngularJS ، این بخش را به آشنایی با سرویس های AngularJS و علت استفاده از سرویس ها در AngularJS ، اختصاص دادیم. در این بخش یاد خواهی گرفت که چه طور در AngularJS شما یک service را تعریف کنید. و یا اینکه چه طور از تعداد زیادی از service های از قبل تعریف شده در AngularJS ، در برنامه ی خود استفاده کنید.
سرویس های AngularJS
Service چیست
در AngularJS یک سرویس یک تابع یا یک شی است. که برای برنامه AngularJS شما در دسترس بوده و فقط محدود به آن است.
در AngularJS حدود ۳۰ عدد service ایجاد شده است. که یکی از سرویس های پر کاربرد آن سرویس $location است.
سرویس $location شامل متدهایی می شود که اطالاعاتی را در مورد موقعیت قرارگیری صفحه وب جاری، ارائه می دهد.
مثال :
| var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl(); }); |
توجه داشته باشید که سرویس $location به عنوان یک آرگومان به کنترل کننده منتقل می شود. و برای استفاده از سرویس در کنترل کننده، باید به عنوان یک وابستگی تعریف شود.
علت استفاده از سرویس ها
برای بیشتر سرویس ها از جمله $location ، به نظر می رسد که شما می توانید از اشایی که در DOM قرار دارد از جمله شی window.location استفاده کنید. اما برخی از محدودیت ها، حداقل برای برنامه AngularJS شما وجود دارد.
AngularJS به طور مداوم برنامه شما را بررسی می کند. و برای آنکه رویدادها را به درستی انجام دهد، AngularJS ترجیح می دهد که از سرویس $ Location به جای window.location استفاده کنید.
سرویس $http
سرویس $http که از رایج ترین سوریس ها در آنگولار است. این سرویس درخواست شما را به سرور ارسال می کند. و سرور به برنامه شما پاسخ می دهد.
مثال :
| var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm").then(function (response) { $scope.myWelcome = response.data; }); }); |
سرویس $timeout
سرویس $timeout عملکرد مشابه تابع window.setTimeout است.
مثال :
| 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 عملکرد مشابه تابع window.setInterval است.
مثال :
| 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:
مثال :
| app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); } }); |
برای استفاده از سرویس ساخته شده خود، هنگام تعریف کنترل کننده، آن را به عنوان وابستگی اضافه کنید:
مثال :
| app.controller('myCtrl', function($scope, hexafy) { $scope.hex = hexafy.myFunc(255); }); |
استفاده از سرویس ایجاد شده در فیلتر
هنگامی که یک سرویس ایجاد کرده اید و آن را به برنامه خود وصل کردید، می توانید از سرویس در هر کنترل کننده، دستورالعمل، فیلتر یا حتی درون سرویس های دیگر نیز، استفاده کنید.
برای استفاده از سرویس درون فیلتر، هنگام تعریف فیلتر، آن را به عنوان وابستگی اضافه کنید:
مثال :
| app.filter('myFormat',['hexafy', function(hexafy) { return function(x) { return hexafy.myFunc(x); }; }]); |
شما می توانید از فیلتر در زمان نمایش دادن مقادیر یک آبجکت یا آرایه استفاده کنید:
مثال :
| <ul> <li ng-repeat="x in counts">{{x | myFormat}}</li> </ul> |
کلام آخر
مطالب آموزش فوق به منظور آشنایی با سرویس های AngularJS برای شما ارائه گردید. و در مرور این آموزش،با کاربردها و چگونگی استفاده از انواع سرویس در آنگولار ، آشنا شدید. همچنین یاد گرفتید که چه طور یک سرویس جدید را ایجاد کنید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
