service ها در آنگولار جی اس

در AngularJS شما می توانید خدمات خود را، و یا استفاده از یکی از بسیاری از خدمات داخلی ساخته شده توسط angular js ایجاد کنید.

مقالات

یک سرویس service چیست؟

در AngularJS یک (service) سرویس یک تابع یا شی است که برای برنامه AngularJS شما در دسترس است و محدود به آن است.

AngularJS دارای حدود 30 سرویس (service) ساخته شده است. یکی از آنها خدمات location$ است.

خدمات location$ روش هایی را ارائه می دهد که اطلاعات مربوط به مکان صفحه وب فعلی را باز می گرداند:

از سرویس موقعیت location$ در controlاستفاده کنید:

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

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 برای درخواست داده ها از سرور استفاده کنید:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

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 است.

مثال:

یک پیام جدید پس از دو ثانیه نمایش داده می شود:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

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 است.

نمایش زمان هر ثانیه:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

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.service('hexafy', function() {

this.myFunc = function (x) {

return x.toString(16);

}

});

برای استفاده از خدمات سفارشی ساخته شده خود، هنگام تعریف کنترل کننده، آن را به عنوان وابستگی اضافه کنید:

مثال:

از یک سرویس سفارشی به نام hexafy برای تبدیل یک عدد به یک عدد هگزادسیمال استفاده کنید:

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

app.controller('myCtrl', function($scope, hexafy) {

$scope.hex = hexafy.myFunc(255);

});

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

هنگامی که یک سرویس ایجاد کرده اید و آن را به برنامه خود وصل کرده اید، می توانید از سرویس در controller, directive, filter, یا حتی درون سرویس های دیگر استفاده کنید.

برای استفاده از سرویس درون filter، هنگام تعریف فیلتر، آن را به عنوان وابستگی (dependency )اضافه کنید:

hexafy سرویس مورد استفاده در فیلتر myFormat:

app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);

app.filter('myFormat',['hexafy', function(hexafy) {

return function(x) {

return hexafy.myFunc(x);

};

}]);

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

یک سرویس به نام hexafy ایجاد کنید:

<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

<ul>

<li ng-repeat="x in counts">{{x | myFormat}}</li>

</ul>

5/5 - (1 امتیاز)

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

یک سرویس service چیست؟

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

سرویس HTTP با $http

سرویس $timeout

سرویس interval$

ایجاد سرویس خودتان

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

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

یک سرویس service چیست؟

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

سرویس HTTP با $http

سرویس $timeout

سرویس interval$

ایجاد سرویس خودتان

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

مطالب زیر را حتما مطالعه کنید

مسیریابی انگولار AngularJS Routing

ساخت انیمیشن با انگولار – angularjs animation

AngularJS Includes

api آنگولار جی اس – Angularjs API

اعتبارسنجی فرم ها با آنگولار – AngularJS Form Validation

ساخت form با آنگولار جی اس – angular forms

دیدگاهتان را بنویسید لغو پاسخ