Layanan Tutorial Pengantar AngularJS (Layanan)

Penulis：Eve Cole Waktu Pembaruan：2025-07-22 19:16:01

Layanan AngularJS (Layanan)

Di AngularJS Anda dapat membuat layanan sendiri atau menggunakan layanan bawaan.

Apa itu layanan?

Di AngularJS, layanan adalah fungsi atau objek yang dapat digunakan dalam aplikasi AngularJS Anda.

AngularJS memiliki lebih dari 30 layanan bawaan.

Ada layanan $ lokasi yang dapat mengembalikan alamat URL halaman saat ini.

Contoh

 <! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv-pr-app = "con"> </script> </head> <body> "myg-pryp =" con (/ccript> </head> </head> <body> <bod-ng-pr-p = "conp = non"> </script> </head> <body> <body> "myg-pryp =" nn "> </script> </head> <body> <bod- div URL Halaman saat ini: </p> <h3> {{myUrl}} </h3> </div> <p> Contoh ini menggunakan layanan lokasi $ bawaan untuk mendapatkan URL dari halaman saat ini. </p> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope, $ location) {$ scope.myurl = $ location.absUrl ();}); </script> </body> </html>

Hasil Menjalankan:

URL halaman saat ini:

http://www.runoob.com/try/try.php?filename=try_ng_services

Contoh ini menggunakan layanan lokasi $ bawaan untuk mendapatkan URL dari halaman saat ini.

Catatan: Layanan $ lokasi dilewatkan sebagai parameter ke pengontrol. Jika Anda ingin menggunakannya, Anda harus mendefinisikannya di pengontrol.

Mengapa Menggunakan Layanan?

$ http adalah layanan yang paling umum digunakan dalam aplikasi AngularJS. Layanan mengirimkan permintaan ke server, dan aplikasi merespons data yang dikirimkan oleh server.

AngularJS akan selalu memantau aplikasi dan menangani perubahan peristiwa. AngularJS menggunakan layanan $ lokasi lebih baik daripada menggunakan objek Window.location.

Layanan $ http

$ http adalah layanan yang paling umum digunakan dalam aplikasi AngularJS. Layanan mengirimkan permintaan ke server, dan aplikasi merespons data yang dikirimkan oleh server.

Contoh

Gunakan layanan $ http untuk meminta data dari server:

 <!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"> <p> Selamat Datang: </p> <> {{mywelcome}} <> </div> <p> Layanan $ http meminta informasi dari server, dan nilai yang dikembalikan ditempatkan dalam variabel "mywelcome". </p> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope, $ http) {$ http.get ("welcome.htm"). lalu (function) {$ scope.mywelcome = response.data.data.

Hasil Menjalankan:

Pesan Selamat Datang:

Selamat datang untuk berkunjung

Layanan $ http meminta informasi dari server, dan nilai yang dikembalikan ditempatkan dalam variabel "mywelcome".

Di atas adalah instance layanan $ http yang sangat sederhana. Untuk lebih banyak aplikasi layanan $ http, silakan periksa tutorial AngularJS HTTP.

$ Layanan Timeout

Layanan TimularJS $ Timeout sesuai dengan fungsi JS Window.SetTimeout.

Contoh

Informasi akan ditampilkan dalam dua detik:

 <!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"> <p> Informasi ditampilkan setelah dua detik: </p> <h1> {{myheader}} </h1> </div> <p> $ Timeout Access mengeksekusi fungsi yang ditentukan setelah jumlah milidetik yang ditentukan. </p> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope, $ timeout) {$ scope.myheader = "Hello world!"; $ timeout (function () {$ scope.myheader = "bagaimana kabarmu hari ini?" 2000);}); </script> </body> </html>

Hasil Menjalankan:

Informasi akan ditampilkan dalam dua detik:

Apa kabarmu hari ini?

$ Timeout Access menjalankan fungsi yang ditentukan setelah jumlah milidetik yang ditentukan.

$ layanan interval

Layanan Interval AngularJS $ sesuai dengan Window JS.SetInterval Function.

Contoh

Tampilkan informasi setiap dua detik:

 <!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"> <p> Waktu saat ini adalah: </p> <h1> {{thetime}} </h1> </div> <p> $ Interval Access memanggil fungsi atau menghitung ekspresi dalam periode yang ditentukan (dalam milidetik). </p> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope, $ interval) {$ scope.thetime = new date (). Tolocaletimestring (); $ interval (function () {$ scope.thetime = date = date (). 1000);}); </script> </body> </html>

Efek Menjalankan:

Sekarang waktunya adalah:

3:41:09 PM

$ Interval Access memanggil fungsi atau dihitung dalam periode tertentu (dalam milidetik)

Buat Layanan Kustom

Anda dapat membuat akses khusus tautan itu ke modul Anda:

Buat akses bernama hexafy:

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

Untuk menggunakan akses khusus, Anda perlu menambahkannya secara mandiri saat mendefinisikan filter:

Contoh

Gunakan layanan kustom hexafy untuk mengubah angka menjadi hexafy:

 <! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv norg-p = " ng-controller = "myctrl"> <p> Hexagram 255 adalah: </p> <h1> {{hex}} </h1> </div> <p> Layanan khusus, digunakan untuk mengonversi nomor hexagram: </p> <skrip> var app = angular.module ('myapp', []); {this.myfunc = function (x) {return x.toString (16);}}); app.controller ('myctrl', function ($ scope, hexafy) {$ scope.hex = hexafy.myfunc (255);}); </script> </body

Hasil Menjalankan:

Sistem heksadesimal 255 adalah:

Layanan khusus untuk mengonversi nomor heksadesimal:

Di filter, gunakan layanan khusus

Saat Anda membuat layanan khusus dan terhubung ke aplikasi Anda, Anda dapat menggunakannya di pengontrol, arahan, filter, atau layanan lainnya.

Gunakan layanan heksafy di filter myformat:

 <!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp">Use services in filters:<h1>{{255 | myFormat}} </h1> </div> <script> var app = angular.module ('myapp', []); app.service ('hexafy', function () {this.myfunc = function (x) {return x.tostring (16); {}); app.filter) {return x.tostring (16);}}); app.filter ('MyFaFaty (' hexFat ', [16);}}); app.filter (' MyFaFaFat ('hexFat', [16);}}); App.filter ('MyFaFaty (' hEHATFAT ', [16);}}); app.filter (' MyFORCRING (16);}}); app.filter ('MyFORTER (' hEHXTER (16); function (x) {return hexafy.myfunc (x);

Efek Menjalankan:

Gunakan layanan dalam filter:

Saat mendapatkan nilai dalam array objek, Anda dapat menggunakan filter:

Buat layanan heksafy:

 <! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv norg-p = " ng-controller = "myctrl"> <p> Gunakan filter saat mendapatkan array [255, 251, 200] nilai: </p> <ul> <li ng-repeat = "x in counts"> {{x | MyFormat}} </li> </ul> <p> Filter menggunakan layanan untuk mengonversi desimal menjadi hexadecimal. </p> </div> <script> var app = angular.module ('myapp', []); app.service ('hexafy', function () {this.myfunc = function (x) {return x.toString (16);}}); app.filter ('myFormat', ['hex' {hex); hexafy.myfunc (x);};}]); app.controller ('myctrl', function ($ scope) {$ scope.counts = [255, 251, 200];}); </script> </body> </html>

Efek Menjalankan:

Gunakan filter saat mendapatkan array [255, 251, 200] nilai:

Filter menggunakan layanan untuk mengonversi desimal menjadi heksadesimal.

Di atas adalah kompilasi informasi tentang layanan AngularJS. Kami akan terus menambahkannya nanti. Untuk teman yang membutuhkan, silakan merujuknya.