เรียนรู้ 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 ตัวอย่างนี้:

การใช้งานง่ายของบริการ $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

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

ลองทดลองเอง

การใช้บริการที่เป็นส่วนตัวในฟิลเตอร์

หลังจากที่สร้างบริการและเชื่อมต่อมันกับโปรแกรมของคุณ คุณสามารถใช้บริการนี้ในเครื่องมือควบคุม ออร์เดอเรอร์ ฟิลเตอร์ หรือบริการอื่น ๆ ตามต้องการ

เพื่อใช้บริการในฟิลเตอร์ กรุณาเพิ่มเป็นของเสียงของฟิลเตอร์ที่คุณกำหนด:

บริการที่ใช้ในฟิลเตอร์ myFormat คือ hexafy:

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

ลองทดลองเอง

คุณสามารถใช้ฟิลเตอร์นี้เมื่อแสดงค่าของตัวแปรหรือแนวคิดที่มีในลิสต์:

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

ลองทดลองเอง