1. Apa fungsinya?
Layanan $ Lokasi menganalisis URL di bilah alamat browser (berdasarkan Window.location), memungkinkan kami untuk menggunakan URL lebih nyaman dalam aplikasi. Mengubah URL di bilah alamat akan menanggapi layanan $ lokasi, dan memodifikasi URL di lokasi $ akan menanggapi bilah alamat.
$ Layanan Lokasi:
Mengekspos URL bilah alamat browser saat ini, jadi kami bisa
1. Perhatikan dan amati URL
2. Ubah URL
Ketika pengguna melakukan hal berikut, menyinkronkan URL dengan browser:
1. Ubah bilah alamat
2. Klik tombol Back atau Forward (atau klik tautan historis).
3. Klik tautan
Metode yang menggambarkan objek URL sebagai serangkaian metode (protokol, host, jalur, pencarian, hash).
1. Bandingkan $ Lokasi dan Window.Lokasi
1) Tujuan: Kedua Window.Lokasi dan $ Layanan Lokasi memungkinkan akses baca dan tulis ke lokasi browser saat ini.
2) API: Window.Lokasi memaparkan objek yang tidak diproses dengan beberapa properti yang dapat dimodifikasi secara langsung; Sementara layanan $ lokasi memperlihatkan beberapa metode pengambil/setter gaya jQuery.
3) Integrasi dengan Siklus Deklarasi Aplikasi Angular: $ Lokasi tahu tentang semua tahap siklus deklarasi internal, dan berintegrasi dengan $ watch, dll.; sementara window.location tidak berfungsi.
4) Combine dengan HTML5 API yang mulus: dengan fallback untuk browser lama, apakah ada metode kompatibilitas untuk versi browser yang lebih rendah?); sementara window.location tidak.
5) Ketahui direktori root atau konteks dokumen yang dimuat oleh aplikasi: window.location tidak berfungsi, dan wnidow.location.path akan mengembalikan "/docroot/subpath"; dan $ location.path () mengembalikan docroot yang sebenarnya.
2. Kapan saya harus menggunakan $ lokasi?
Dalam suatu aplikasi, setiap kali Anda perlu menanggapi perubahan pada URL saat ini, atau ingin mengubah URL browser saat ini.
3. Apa yang tidak dilakukannya?
Ketika URL browser berubah, halaman tidak akan dimuat ulang. Jika Anda perlu melakukan ini (ubah alamat dan mengimplementasikan ulang halaman), gunakan API tingkat bawah, $ window.location.href.
2. Tinjauan umum API (Tinjauan keseluruhan API)
Layanan $ lokasi dapat berperilaku berbeda sesuai dengan konfigurasi saat diinisialisasi. Konfigurasi default cocok untuk sebagian besar aplikasi, dan konfigurasi lainnya disesuaikan, yang dapat memungkinkan beberapa fitur baru.
Ketika layanan $ lokasi diinisialisasi, kami dapat menggunakannya dalam metode jQuery Style Getter dan Setter, memungkinkan kami untuk mendapatkan atau mengubah URL browser saat ini.
1. $ Konfigurasi Layanan Lokasi
Untuk mengonfigurasi layanan $ lokasi, Anda perlu mendapatkan $ locationProvider (http://code.angularjs.org/1.0.2/docs/api/ng.$locationProvider) dan atur parameter berikut:
html5mode (mode): {boolean}, true - lihat mode html5; Salah - Lihat Mode Hashbang, Default: Salah. (Bab -bab berikut akan menjelaskan berbagai mode)
hashPrefix (awalan): {string}, awalan yang digunakan oleh hashbang (ketika html5mode salah, gunakan mode hashbang agar sesuai dengan browser yang tidak mendukung mode html5), default: '!'
2. Metode Getter and Setter
Layanan $ Lokasi menyediakan metode Getter untuk bagian URL hanya baca (absurl, protokol, host, port), dan juga menyediakan metode pengambil dan setter untuk URL, jalur, pencarian, dan hash.
// Dapatkan jalur saat ini $ location.path (); // Ubah jalur $ location.path ('/newValue')Semua metode setter mengembalikan objek lokasi $ yang sama untuk mengimplementasikan sintaks rantai. Misalnya, memodifikasi beberapa atribut dalam satu kalimat, metode setter rantai serupa:
$ location.path ('/newValue'). Cari ({key: value});
Ada metode penggantian khusus yang dapat digunakan untuk memberi tahu layanan $ lokasi untuk menggunakan jalur alih -alih membuat riwayat baru ketika disinkronkan dengan browser lain kali Anda disinkronkan dengan browser. Metode REPLACE berguna ketika kami ingin menerapkan pengalihan tetapi tidak ingin membatalkan tombol Kembali (tombol Kembali kembali dan mengambil pengalihan). Jika Anda ingin mengubah URL saat ini tanpa membuat riwayat baru, kami dapat melakukan ini:
$ location.path ('/somenewpath'). ganti ();
Perhatikan bahwa metode setter tidak akan memperbarui window.location segera. Sebagai gantinya, layanan $ lokasi akan mengetahui siklus hidup lingkup dan menggabungkan beberapa perubahan lokasi $ menjadi satu, dan mengirimkannya ke jendela. Objek Lokasi dalam Tahap Lingkup $ Digest. Karena perubahan dalam beberapa status $ lokasi akan digabungkan menjadi satu perubahan, di browser, metode REPLACE () hanya dipanggil sekali, sehingga seluruh komit hanya memiliki satu pengganti (), yang tidak akan menyebabkan browser membuat sejarah tambahan. Setelah browser diperbarui, layanan $ lokasi akan mengatur ulang bit flag melalui metode ganti (), dan perubahan di masa depan akan membuat riwayat baru kecuali diganti () dipanggil lagi.
Setter dan pengkodean karakter
Kami dapat meneruskan karakter khusus ke dalam layanan $ lokasi, dan layanan akan secara otomatis menyandikannya sesuai dengan standar RFC3986. Saat kita mengakses metode ini:
3. Mode Hashbang dan HTML5
Layanan $ Lokasi memiliki dua mode konfigurasi yang dapat mengontrol format URL dari bilah alamat browser: mode hashbang (default) dan mode HTML5 berdasarkan menggunakan API riwayat HTML5. Di kedua mode, aplikasi menggunakan API yang sama. Layanan $ lokasi akan berkolaborasi dengan cuplikan URL yang benar dan API browser untuk membantu kami melakukan perubahan URL browser dan manajemen sejarah.
1. Mode Hashbang (Mode Default)
Dalam mode ini, $ lokasi menggunakan URL Hashbang di semua browser. Lihat cuplikan kode berikut untuk mempelajari lebih lanjut:
itu ('harus menampilkan contoh', suntikan (fungsi ($ locationProvider) {$ locationProvider.html5mode = false; $ locationProvider.hashPrefix = '!';}, fungsi ($ lokasi) {// buka http:/host.com/base/index.html# location.abs.abs. 'http://host.com/base/index.html#! objek kosong $ location.search ({a: 'b', c: true}); $ location.absurl () == 'http://host.com/base/index.html#!/new?x=y';Merangkak aplikasi Anda (memungkinkan Google untuk mengindeks aplikasi kami)
Jika kami ingin aplikasi AJAX kami diindeks, kami perlu menambahkan tag meta khusus ke kepala:
<meta name = "fragment" content = "!" />
Melakukan hal itu akan memungkinkan robot crawler untuk meminta tautan saat ini menggunakan parameter _escaped_fragment_, beri tahu server kami robot crawler, dan berikan snapshot HTML yang sesuai. Untuk informasi lebih lanjut tentang teknologi ini, silakan kunjungi https://developers.google.com/webmasters/ajax-crawling/docs/specification?hl=en-cn
4. Mode HTML5
Dalam mode HTML5, getters dan setter dari layanan $ lokasi berinteraksi dengan URL browser melalui API riwayat HTML5, yang memungkinkan penggunaan jalur reguler dan modul pencarian untuk mengganti mode hashbang. Jika beberapa browser tidak mendukung API riwayat HTML5, layanan $ lokasi akan secara otomatis kembali ke mode menggunakan URL Hashbang. Untuk memungkinkan kami menyingkirkan kekhawatiran bahwa tidak jelas apakah browser yang menunjukkan aplikasi kami mendukung API sejarah, menggunakan layanan $ lokasi adalah pilihan yang tepat dan terbaik.
Membuka URL reguler di browser yang lebih tua akan dikonversi ke Hashbangurl.
Membuka URL Hashbang di browser modern akan ditulis ulang ke URL biasa.
1. Kompatibilitas ke depan dengan browser yang lebih lama
Untuk browser yang mendukung HTML5 History API, $ Location kembali untuk menulis jalur dan pencarian. Jika browser tidak mendukung API riwayat, $ lokasi akan dikonversi untuk menyediakan URL hashbang. Ini secara otomatis dikonversi oleh layanan $ lokasi.
2. Penulisan ulang tautan html
Ketika kami menggunakan mode API riwayat, kami membutuhkan tautan yang berbeda untuk browser yang berbeda, tetapi kami hanya perlu memberikan URL biasa, misalnya <a href = "/beberapa? Foo = bar"> tautan </a>
Ketika pengguna mengklik hyperlink ini:
Di browser lama, URL akan diubah menjadi /index.html#!/some?foo=bar
Di browser modern, URL akan diubah menjadi /beberapa? Foo = bar
Dalam kasus berikut, tautan tidak akan ditulis ulang, tetapi akan menyebabkan halaman dimuat ke dalam URL yang sesuai:
Hyperlink yang mengandung target: <a href = "/ext/link? A = b" target = "_ self"> tautan </a>
Tautan absolut ke domain yang berbeda: <a href = "http://angularjs.org/"> tautan </a>
Setelah mengatur jalur dasar, gunakan tautan yang dimulai dengan "/" ke hyperlink dari jalur dasar yang berbeda: <a href = "/not-my-base/link"> tautan </a>
3. Sisi server
Dengan menggunakan metode ini, meminta pengalihan URL di server, kami biasanya perlu mengarahkan semua tautan kami ke aplikasi kami. (misalnya, index.html).
4. Merangkak aplikasi Anda
Sama seperti sebelumnya
5. Tautan relatif
Pastikan untuk memeriksa semua tautan relatif, gambar, skrip, dll. Kita harus menentukan url dasar (<base href = " /my-base">) di <head> dan menggunakan URL absolut (dimulai dengan /) di mana-mana. Karena URL relatif akan dikonversi menjadi URL absolut berdasarkan jalur awal dokumen (biasanya berbeda dari akar aplikasi). (URL relatif akan diselesaikan ke URL absolut menggunakan URL absolut awal dokumen, yang seringkali berbeda dari akar aplikasi).
Kami sangat terdorong untuk menjalankan aplikasi sudut yang memungkinkan API riwayat dalam root dokumen, karena ini memperhitungkan masalah tautan relatif dengan baik.
6. Mengirim tautan di antara berbagai browser
(Ini menjelaskan bahwa alamat kedua mode dapat disesuaikan dengan browser yang berbeda, secara otomatis dikonversi, dan diulang lagi ...)
7. Contoh
Dalam contoh ini, Anda dapat melihat dua instance lokasi $, yang keduanya adalah mode HTML5, tetapi pada browser yang berbeda, sehingga kita dapat melihat perbedaan antara keduanya. Layanan $ lokasi ini terhubung ke dua "browser" palsu. Setiap input mewakili bilah alamat browser.
Perhatikan bahwa ketika kita memasukkan alamat hashbang ke "browser" pertama (atau yang kedua?), Itu tidak akan menulis ulang atau mengarahkan URL lain, dan proses konversi ini hanya akan terjadi ketika halaman ulang.
<! Doctype html> <html ng-app> <head> <base href = ""/> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/<title> fake-browser </iteme> <meta content = "ie = edge, chrome, chrome" h-browser </title> <meta content = "ie = chrome, chrome, chrome" h-browser </item type = "text/css"> .ng-cloak {display: none; } </tyle> </head> <body> <Div ng-non-bindable> <v id = "html5-mode" ng-controller = "html5cntl"> <h4> browser dengan API html5 "> </h4> </div <cro-address browser =" html5 "> </h4> </h4> <brot> <croD-bar browser =" html5 "> </h4> </h4> <br-address browser =" html5 "> </H4> {{$ location.protocol ()}} <br> $ location.host () = {{$ location.host ()}} <br> $ location.port () = {$ location.port ()}} <br> $ location.path () = {{$ location.path ()}}} <br> {{$ location.search ()}} <br> $ location.hash () = {{$ location.hash ()}} <br> <a href = "http://www.host.com/base/first?a=b">/basis/pertama? A = b </a> | <a href = "http://www.host.com/base/sec/ond?flag#hash"> sec/ond? flag#hash </a> | <a href = "/basis lainnya/lain? Pencarian"> eksternal </a> </div> <div id = "hashbang-mode" ng-controller = "hashbangcntl"> <h4> browser tanpa riwayat API </h4> <v ng-address-browser = "hashbang"> </h4> <v ng-ng-address browser = "hashbang"> </h4> <v ng-ng-address browser = "hashbang"> </h4> </h4> <dv-ng-address browser = "hashbang"> </h4> {{$ location.protocol ()}} <br> $ location.host () = {{$ location.host ()}} <br> $ location.port () = {$ location.port ()}} <br> $ location.path () = {{$ location.path ()}}} <br> {{$ location.search ()}} <br> $ location.hash () = {{$ location.hash ()}} <br> <a href = "http://www.host.com/base/first?a=b">/basis/pertama? A = b </a> | <a href = "http://www.host.com/base/sec/ond?flag#hash"> sec/ond? flag#hash </a> | <a href = "/-base/lain? Cari"> eksternal </a> </div> </div> <script src = "../ angular.js" type = "text/javascript"> </script> <script type = "text/javaScript"> function funche (initurl, basis-basis ini. }; this.url = function () {return initurl; }; this.defer = function (fn, delay) {setTimeOut (function () {fn ();}, delay || 0); }; this.basehref = function () {return baseHref; }; this.notify whenOutstandingRequests = angular.noop; } var browsers = {html5: new falebrowser ('http://www.host.com/base/path? '/base/index.html')}; fungsi html5cntl ($ scope, $ location) {$ scope. $ location = $ location; } function hashbangcntl ($ scope, $ location) {$ scope. $ location = $ location; } function initenv (name) {var root = angular.element (document.geteLementById (name + '-mode')); angular.bootstrap (root, [function ($ compileProvider, $ locationProvider, $ as) {debugger; $ locationprovider.html5mode (true) .hashprefix ('!'); $ asvalue ('$ browser', browser [name]); $ advalue ('document', '$ browser', browser [name]); $ adve.value ('document' $ browser ', browser [name.)); $ invalue (' document 'document', browser [name. name.); $ invalue ('document' document ', browser [name. name. {history: name == 'html5'}); $ compileProvider.directive ('ngAddressbar', function () {return function (scope, elm, attrs) {var browser = browser [attrs.browser], input = angular.element ('<input = "), input. input.bind (keypress keyup keydown ', function () {if (! Delay) {delay = setTimeout (fireurlchange, 250);}}); browser.urlchange (input.val ()); root.bind ('klik', fungsi (e) {e.stoppropagation ();}); } initenv ('html5'); initenv ('hashbang'); </script> </body> </html>V. Instruksi tambahan
1. Halaman Muat ulang navigasi
Layanan $ lokasi hanya memungkinkan kami untuk mengubah URL; Itu tidak memungkinkan kami untuk memuat ulang halaman. Ketika kita perlu mengubah URL dan memuat ulang halaman atau melompat ke halaman lain, kita perlu menggunakan titik tingkat rendah untuk mendapatkan API, $ window.location.href.
2. Menggunakan $ lokasi di luar siklus hidup lingkup
$ Lokasi tahu siklus hidup lingkup Angular. Ketika URL browser berubah, itu memperbarui $ lokasi dan memanggil $ berlaku, jadi semua $ Watcher dan $ Observer diberitahu. Ketika kami memodifikasi lokasi $ di tahap $ Digest, tidak akan ada masalah; $ Lokasi akan menyebarkan modifikasi ini ke browser dan memberi tahu semua $ Watcher dan $ Observer. Ketika kita perlu mengubah $ lokasi di luar Angular (mis. Dalam acara DOM atau dalam pengujian), kita harus menghubungi $ berlaku untuk menyebarkan perubahan ini.
3. $ location.path () dan! atau / awalan
Jalur dapat dimulai secara langsung dengan "/"; Setter $ location.path () akan diisi secara otomatis ketika nilainya tidak dimulai dengan "/".
Perhatikan "!" awalan, dalam mode hashbang, bukan milik bagian dari $ location.path (). Itu hanya hashprefix.
6. Pengujian dengan Layanan $ Lokasi
Saat menggunakan layanan $ lokasi dalam pengujian, ia berada di luar siklus hidup lingkup sudut. Ini berarti kita harus bertanggung jawab untuk memanggil SCOPE.Apply ().
jelaskan ('serviceOndTest', function () {sebelum absen (modul (function ($ inced) {$ incer.factory ('serviceUnderTest', function ($ location) {// apapun yang dilakukannya ...});}); itu ('harus ...', function ($ function, $ rootscope, servictertundtest) {$) ($) (function ($ location, $ rootscope, servictertundtest) {$) ($) (function ') apa pun yang harus dilakukan layanan ...}));});7. Bermigrasi dari rilis AngularJS sebelumnya
Dalam sudut awal, $ lokasi menggunakan hashpath atau hashSearch untuk memproses metode dan metode pencarian. Dalam rilis ini, bila perlu, layanan $ lokasi memproses jalur dan metode pencarian, dan kemudian menggunakan informasi yang diperoleh untuk membentuk url hashbang (misalnya, http://server.com/#!/path?search=a).
8. Ikatan dua arah ke $ lokasi
Angular Compiler saat ini tidak mendukung pengikatan metode dua arah (https://github.com/angular/angular.js/issues/404). Jika kami ingin mengimplementasikan ikatan dua arah dengan objek $ lokasi (menggunakan NGModel Directive in Input), kami perlu menentukan properti model tambahan (misalnya: LocationPath), dan tambahkan dua jam tangan $ untuk mendengarkan pembaruan lokasi $ di kedua arah, misalnya: misalnya: misalnya: misalnya:
<input type = "text" ng-model = "locationpath" />
// js - controller $ scope. $ watch ('locationpath', function (path) {$ location.path (path);); $ scope. $ watch ('$ location.path ()', function (path) {scope.locationpath = path;});Di atas adalah informasi tentang AngularJS menggunakan $ lokasi. Kami akan terus menambahkan informasi yang relevan di masa mendatang. Terima kasih atas dukungan Anda untuk situs ini!