Layanan AngularJS

Dalam AngularJS, Anda dapat membuat layanan sendiri, atau menggunakan salah satu layanan bawaan yang ada.

Apa itu layanan?

Dalam AngularJS, layanan adalah fungsi atau objek yang dapat digunakan dan hanya untuk aplikasi AngularJS Anda.

AngularJS memiliki sekitar 30 layanan bawaan. Salah satunya adalah $location layanan.

$location Layanan memiliki metode yang dapat mengembalikan informasi tentang lokasi halaman saat ini:

Contoh

Menggunakan layanan $location di kontroler:

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

Coba Sendiri

Perhatikan bahwa$location Layanan disampaikan ke kontroler sebagai parameter. Untuk dapat digunakan di kontroler, layanan ini harus didefinisikan sebagai ketergantungan.

Mengapa menggunakan layanan?

Untuk banyak layanan seperti $location layanan, sepertinya Anda dapat menggunakan objek yang sudah ada di DOM (contoh objek window.location），tetapi akan ada beberapa batasan, setidaknya untuk aplikasi AngularJS Anda.

AngularJS terus memantau aplikasi Anda, untuk memastikan bahwa aplikasi Anda dapat menangani perubahan dan peristiwa dengan benar, AngularJS lebih suka Anda menggunakan $location layanan ini daripada objek window.location.

Layanan $http

Contoh ini menunjukkan Layanan ini adalah salah satu layanan paling sering digunakan di aplikasi AngularJS. Layanan ini mengirimkan permintaan ke server dan membiarkan aplikasi Anda menangani tanggapan.

Contoh

Menggunakan layanan $http untuk meminta data dari server:

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

Coba Sendiri

$scope.myWelcome = response.data; Contoh ini menunjukkan $http

Penggunaan yang sangat sederhana layanan $timeout. Untuk mendapatkan informasi lebih lanjut tentang layanan $http di tutorial AngularJS Http.

$timeout Layanan adalah versi AngularJS dari window.setTimeout fungsi.

Contoh

Tampilkan pesan baru setelah dua detik:

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

Coba Sendiri

Layanan $interval

$interval Layanan adalah versi AngularJS dari window.setInterval fungsi.

Contoh

Tampilkan waktu setiap detik:

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

Coba Sendiri

Membuat layanan anda sendiri

Untuk membuat layanan yang anda buat sendiri, hubungkan layanan dengan modul:

Membuat layanan dengan nama hexafy layanan:

app.service('hexafy', function() {
  this.myFunc = function (x) {
    return x.toString(16);
  }
});

Untuk menggunakan layanan yang Anda buat sendiri, tambahkan layanan tersebut sebagai kewajiban saat menetapkan kontroler:

Contoh

Menggunakan layanan yang dinamai hexafy untuk mengonversi angka ke bilangan heksadesimal:

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

Coba Sendiri

Menggunakan Layanan Khusus dalam Pengecualian

Buat layanan dan kaitkannya ke aplikasi Anda setelah membuat layanan, kemudian Anda dapat menggunakan layanan ini di mana saja dalam kontroler, instruksi, pengecualian, atau bahkan layanan lainnya.

Untuk menggunakan layanan dalam pengecualian, tambahkan sebagai kaitan saat menetapkan pengecualian:

Layanan yang digunakan dalam pengecualian myFormat: hexafy

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

Coba Sendiri

Anda dapat menggunakan pengecualian ini saat menampilkan nilai objek atau array:

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

Coba Sendiri