ใน AngularJS คุณสามารถทำให้การบริการของคุณเองหรือใช้หนึ่งในหลายบริการในตัว
บริการคืออะไร?
ใน AngularJS บริการเป็นฟังก์ชั่นหรือวัตถุที่สามารถใช้ได้สำหรับ, และ จำกัด การประยุกต์ใช้ AngularJS ของคุณ
AngularJS มีประมาณ 30 ตัวในการให้บริการ หนึ่งในนั้นคือ $location บริการ
$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 บริการเป็นหนึ่งในบริการที่พบมากที่สุดที่ใช้ในงาน AngularJS บริการที่ทำให้การร้องขอไปยังเซิร์ฟเวอร์และช่วยให้ใบสมัครของคุณจัดการกับการตอบสนอง
ตัวอย่าง
ใช้ $http บริการเพื่อขอข้อมูลจากเซิร์ฟเวอร์:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
}); ลองตัวเอง» ตัวอย่างนี้แสดงให้เห็นถึงการใช้งานที่ง่ายมากของ $http บริการ เรียนรู้เพิ่มเติมเกี่ยวกับ $http ให้บริการใน AngularJS Http กวดวิชา
การให้บริการ $ หมดเวลา
$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);
});
ลองตัวเอง» การให้บริการช่วง $
$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);
});
ลองตัวเอง» สร้างบริการของคุณเอง
เพื่อสร้างบริการของคุณเองเชื่อมต่อบริการของคุณเพื่อโมดูล:
สร้างบริการชื่อ hexafy :
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
ในการใช้บริการของคุณเองทำเพิ่มเป็นพึ่งพาเมื่อกำหนดตัวกรอง:
ตัวอย่าง
ใช้บริการทำเองที่มีชื่อ hexafy การแปลงตัวเลขเป็นเลขฐานสิบหก:
app.controller('myCtrl', function($scope, hexafy ) {
$scope.hex
= hexafy .myFunc(255);
});
ลองตัวเอง» ใช้บริการที่กำหนดเองภายในตัวกรอง
เมื่อคุณได้สร้างบริการและเชื่อมต่อไปยังโปรแกรมประยุกต์ของคุณคุณสามารถใช้บริการใด ๆ ในการควบคุมสั่งกรองหรือแม้กระทั่งภายในบริการอื่น ๆ
ในการใช้บริการที่อยู่ภายในตัวกรองเพิ่มเป็นพึ่งพาเมื่อกำหนดตัวกรอง:
บริการ hexafy ใช้ในการกรอง myFormat :
app.filter('myFormat',[ 'hexafy' , function( hexafy ) {
return function(x) {
return
hexafy .myFunc(x);
};
}]);
ลองตัวเอง» คุณสามารถใช้ตัวกรองเมื่อแสดงค่าจากวัตถุหรืออาร์เรย์: