บริการ AngularJS
ใน 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 Tutorial
บริการ $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);
});
บริการช่วงเวลา $
บริการ นี้ เป็น ฟังก์ชัน$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);
};
}]);
คุณสามารถใช้ตัวกรองเมื่อแสดงค่าจากวัตถุหรืออาร์เรย์:
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>