آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

سرویس های AngularJS

 

دوره آموزشی AngularJS

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

سرویس های AngularJS

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

سرویس چیست؟

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

نمونه 1

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
امتحان کنید

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

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

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

سرویس $http

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

نمونه 2

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});
امتحان کنید

سرویس $timeout

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

نمونه 3

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 نمونه Angular تابع window.setInterval می باشد. در مثال زیر در هر ثانیه، زمان را نمایش  خواهد داد.

نمونه 4

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);

           }

       });

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

نمونه 5

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});
امتحان کنید

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

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

نمونه 6

app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);
امتحان کنید

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

نمونه 7

  • {{x | myFormat}}
امتحان کنید

 

  • 1027
  •    974
  • تاریخ ارسال :   1394/12/21

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .