Dalam AngularJS Anda dapat membuat layanan Anda sendiri, atau menggunakan salah satu dari banyak built-in layanan.
Apa Service?
Dalam AngularJS, layanan adalah fungsi, atau objek, yang tersedia untuk, dan terbatas, aplikasi AngularJS Anda.
AngularJS memiliki sekitar 30 built-in layanan. Salah satunya adalah $location layanan.
The $location layanan memiliki metode yang kembali informasi tentang lokasi dari halaman web saat ini:
Contoh
Gunakan $location layanan di controller:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
}); Cobalah sendiri " Perhatikan bahwa $location layanan dilewatkan ke controller sebagai argumen. Untuk menggunakan layanan ini di controller, harus didefinisikan sebagai dependensi.
Mengapa menggunakan Layanan?
Untuk berbagai layanan, seperti $location layanan, sepertinya Anda bisa menggunakan benda-benda yang sudah di DOM, seperti window.location objek, dan Anda bisa, tapi itu akan memiliki beberapa keterbatasan, setidaknya untuk aplikasi AngularJS Anda.
AngularJS terus mengawasi aplikasi Anda, dan untuk itu untuk menangani perubahan dan peristiwa benar, AngularJS lebih suka bahwa Anda menggunakan $location layanan bukan window.location objek.
The $ http Layanan
The $http layanan adalah salah satu layanan yang paling umum digunakan dalam aplikasi AngularJS. Layanan ini membuat permintaan ke server, dan memungkinkan aplikasi Anda menangani respon.
Contoh
Gunakan $http layanan 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;
});
}); Cobalah sendiri " Contoh ini menunjukkan penggunaan yang sangat sederhana dari $http layanan. Pelajari lebih lanjut tentang $http layanan di AngularJS Http Tutorial .
The $ batas waktu Layanan
The $timeout layanan versi AngularJS 'dari window.setTimeout fungsi.
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);
});
Cobalah sendiri " The $ Interval Layanan
The $interval layanan versi AngularJS 'dari window.setInterval fungsi.
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);
});
Cobalah sendiri " Buat Layanan Sendiri
Untuk membuat layanan Anda sendiri, menghubungkan layanan Anda ke modul:
Membuat layanan bernama hexafy :
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
Untuk menggunakan layanan custom made Anda, menambahkannya sebagai ketergantungan ketika mendefinisikan filter:
Contoh
Gunakan layanan custom made bernama hexafy untuk mengkonversi nomor ke nomor heksadesimal:
app.controller('myCtrl', function($scope, hexafy ) {
$scope.hex
= hexafy .myFunc(255);
});
Cobalah sendiri " Gunakan Layanan Kustom Di dalam Filter
Setelah Anda membuat sebuah layanan, dan terhubung ke aplikasi Anda, Anda dapat menggunakan layanan ini di setiap controller, direktif, filter, atau bahkan di dalam layanan lainnya.
Untuk menggunakan layanan ini dalam filter, menambahkannya sebagai ketergantungan ketika mendefinisikan filter:
Layanan hexafy digunakan dalam filter myFormat :
app.filter('myFormat',[ 'hexafy' , function( hexafy ) {
return function(x) {
return
hexafy .myFunc(x);
};
}]);
Cobalah sendiri " Anda dapat menggunakan filter saat menampilkan nilai dari suatu objek, atau array:
Membuat layanan bernama hexafy :
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
Cobalah sendiri "