Layanan AngularJS
Di AngularJS Anda dapat membuat layanan Anda sendiri, atau menggunakan salah satu dari banyak layanan bawaan.
Apa itu Layanan?
Di AngularJS, layanan adalah fungsi, atau objek, yang tersedia untuk, dan terbatas pada, aplikasi AngularJS Anda.
AngularJS memiliki sekitar 30 layanan bawaan. Salah satunya adalah $location
layanan.
Layanan $locationmemiliki metode yang mengembalikan informasi tentang lokasi halaman web saat ini:
Contoh
Gunakan $locationlayanan di pengontrol:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Perhatikan bahwa $locationlayanan diteruskan ke controller sebagai argumen. Untuk menggunakan layanan di controller, itu harus didefinisikan sebagai ketergantungan.
Mengapa menggunakan Layanan?
Untuk banyak layanan, seperti $locationlayanan, sepertinya Anda bisa menggunakan objek yang sudah ada di DOM, seperti window.location
objek, dan Anda bisa, tetapi itu akan memiliki beberapa batasan, setidaknya untuk aplikasi AngularJS Anda.
AngularJS terus-menerus mengawasi aplikasi Anda, dan agar dapat menangani perubahan dan kejadian dengan benar, AngularJS lebih suka Anda menggunakan $location
layanan daripada window.locationobjek.
Layanan $http
Layanan $httpini adalah salah satu layanan yang paling umum digunakan dalam aplikasi AngularJS. Layanan membuat permintaan ke server, dan memungkinkan aplikasi Anda menangani respons.
Contoh
Gunakan $httplayanan untuk meminta data dari server:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
});
Contoh ini menunjukkan penggunaan layanan yang sangat sederhana $http. Pelajari lebih lanjut tentang $httplayanan di Tutorial Http AngularJS .
Layanan $timeout
Layanan $timeoutini adalah versi
window.setTimeoutfungsi AngularJS.
Contoh
Menampilkan 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);
});
Layanan $interval
Layanan $intervalini adalah versi
window.setIntervalfungsi AngularJS.
Contoh
Menampilkan 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);
});
Buat Layanan Anda Sendiri
Untuk membuat layanan Anda sendiri, sambungkan layanan Anda ke modul:
Buat layanan bernama hexafy:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
Untuk menggunakan layanan yang dibuat khusus, tambahkan sebagai ketergantungan saat mendefinisikan pengontrol:
Contoh
Gunakan layanan yang dibuat khusus bernama hexafyuntuk mengonversi angka menjadi angka heksadesimal:
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex
= hexafy.myFunc(255);
});
Gunakan Layanan Kustom di Dalam Filter
Setelah Anda membuat layanan, dan menghubungkannya ke aplikasi Anda, Anda dapat menggunakan layanan di pengontrol, arahan, filter, atau bahkan di dalam layanan lain.
Untuk menggunakan layanan di dalam filter, tambahkan sebagai ketergantungan saat menentukan filter:
Layanan hexafyyang digunakan dalam filter myFormat:
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return
hexafy.myFunc(x);
};
}]);
Anda dapat menggunakan filter saat menampilkan nilai dari objek, atau larik:
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>