I'd seperti untuk membaca nilai dari parameter kueri URL menggunakan AngularJS. I'm mengakses HTML dengan URL berikut:
http://127.0.0.1:8080/test.html?target=bob
Seperti yang diharapkan, lokasi.pencarian
adalah "?target=bob"
.
Untuk mengakses nilai dari target, I've temukan berbagai contoh yang tercantum di web, namun tidak satupun dari mereka bekerja di AngularJS 1.0.0rc10. Secara khusus, berikut ini adalah semua undefined
:
$lokasi.pencarian.target
$lokasi.pencarian['target']
$lokasi.pencarian()['target']
Ada yang tahu apa yang akan bekerja? (Saya'm menggunakan $location
sebagai parameter untuk saya controller)
Update:
I've diposting larutan di bawah ini, tapi saya'm tidak sepenuhnya puas dengan hal itu.
Dokumentasi di Panduan Pengembang: Sudut Jasa: Menggunakan $lokasi negara-negara berikut tentang $location
:
Kapan saya harus menggunakan $lokasi?
Setiap kali aplikasi anda perlu untuk bereaksi terhadap perubahan di saat ini URL atau jika anda ingin mengubah URL di browser.
Untuk skenario saya, saya halaman yang akan dibuka dari halaman web eksternal dengan parameter kueri, jadi saya'm tidak "bereaksi terhadap perubahan di URL saat ini" per se. Jadi mungkin $location
isn't alat yang tepat untuk pekerjaan itu (untuk rincian jelek, lihat jawaban saya di bawah ini). I've oleh karena itu mengubah judul dari pertanyaan ini dari "Bagaimana untuk membaca parameter kueri di AngularJS menggunakan $lokasi?" "Apa's paling ringkas cara untuk membaca parameter kueri di AngularJS?". Jelas saya hanya bisa menggunakan javascript dan ekspresi reguler untuk mengurai lokasi.pencarian
, akan tetapi yang tingkat rendah untuk sesuatu yang mendasar benar-benar menyinggung perasaan saya programmer kepekaan.
Jadi: apakah ada cara yang lebih baik untuk menggunakan $location
daripada yang saya lakukan di jawaban saya, atau ada yang ringkas alternatif?
Anda bisa inject $routeParams (membutuhkan ngRoute) ke controller. Berikut ini's contoh dari dokumen:
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}
EDIT: Anda juga bisa mendapatkan dan mengatur parameter kueri dengan $lokasi layanan (tersedia di ng
), terutama yang pencarian
metode: $lokasi.pencarian().
$routeParams kurang berguna setelah controller's beban awal; $lokasi.pencarian()
dapat dipanggil kapan saja.
Baik bahwa anda've berhasil mendapatkan itu bekerja dengan html5 mode tapi hal ini juga mungkin untuk membuat ini bekerja di hashbang mode.
Anda hanya bisa menggunakan:
$location.search().target
untuk mendapatkan akses ke 'target' pencarian param.
var myApp = angular.module('myApp', []);
function MyCtrl($scope, $location) {
$scope.location = $location;
$scope.$watch('location.search()', function() {
$scope.target = ($location.search()).target;
}, true);
$scope.changeTarget = function(name) {
$location.search('target', name);
}
}
<div ng-controller="MyCtrl">
<a href="#!/test/?target=Bob">Bob</a>
<a href="#!/test/?target=Paul">Paul</a>
<hr/>
URL 'target' param getter: {{target}}<br>
Full url: {{location.absUrl()}}
<hr/>
<button ng-click="changeTarget('Pawel')">target=Pawel</button>
</div>
Untuk memberikan sebagian jawaban pertanyaan saya sendiri, berikut ini adalah contoh untuk browser HTML5:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<script>
angular.module('myApp', [], function($locationProvider) {
$locationProvider.html5Mode(true);
});
function QueryCntl($scope, $location) {
$scope.target = $location.search()['target'];
}
</script>
</head>
<body ng-controller="QueryCntl">
Target: {{target}}<br/>
</body>
</html>
Kuncinya adalah untuk memanggil $locationProvider.html5Mode(true);
seperti yang dilakukan di atas. Sekarang bekerja ketika membuka http://127.0.0.1:8080/test.html?target=bob
. I'm tidak senang tentang fakta bahwa itu tidak't bekerja di browser yang lebih tua, tapi aku bisa menggunakan pendekatan ini pula.
Alternatif yang akan bekerja dengan browser lama akan drop html5mode(benar)
memanggil dan menggunakan alamat berikut dengan hash+slash sebagai gantinya:
http://127.0.0.1:8080/test.html#/?target=bob
Dokumentasi yang relevan adalah di Panduan Pengembang: Sudut Jasa: Menggunakan $lokasi (aneh bahwa saya google pencarian didn't menemukan ini...).
Hal ini dapat dilakukan dengan dua cara:
$routeParams
Terbaik dan solusi yang disarankan adalah dengan menggunakan $routeParams
ke controller.
Itu Membutuhkan ngRoute
modul yang akan diinstal.
function MyController($scope, $routeParams) {
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
// $routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
var search = $routeParams.search;
}
$lokasi.pencarian()
.Ada peringatan di sini. Ini akan bekerja hanya dengan HTML5 mode. Secara default, itu tidak bekerja untuk URL yang tidak memiliki hash(#
) di dalamnya http://localhost/test?param1=abc¶m2=def
Anda dapat membuatnya bekerja dengan menambahkan #/
di URL. http://localhost/test#/?param1=abc¶m2=def
$lokasi.pencarian()
untuk kembali suatu objek seperti:
{
param1: 'abc',
param2: 'def'
}
Hanya untuk summerize .
Jika aplikasi anda adalah yang dimuat dari link eksternal maka sudut tidak akan mendeteksi ini sebagai URL berubah jadi $loaction.pencarian() akan memberikan anda sebuah obyek kosong . Untuk mengatasi ini, anda perlu untuk mengatur berikut di app config(app.js)
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider)
{
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
Hanya presisi untuk Ellis Whitehead's jawaban. $locationProvider.html5Mode(true);
tidak't bekerja dengan versi baru dari angularjs tanpa menentukan URL dasar untuk aplikasi dengan <dasar href="">
tag atau pengaturan parameter requireBase
untuk palsu
Doc :
Jika anda mengkonfigurasi $lokasi untuk menggunakan html5Mode (sejarah.pushState), anda perlu menentukan URL dasar untuk aplikasi dengan
tag atau mengkonfigurasi $locationProvider tidak memerlukan tag dasar dengan melewati definisi objek dengan requireBase:false $locationProvider.html5Mode():
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
hal ini dapat membantu uou
Apa's paling ringkas cara untuk membaca parameter kueri di AngularJS
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<script>
angular.module('myApp', [], function($locationProvider) {
$locationProvider.html5Mode(true);
});
function QueryCntl($scope, $location) {
$scope.target = $location.search()['target'];
}
</script>
</head>
<body ng-controller="QueryCntl">
Target: {{target}}<br/>
</body>
</html>
($location.search()).target
Saya menemukan bahwa untuk SPA HTML5Mode menyebabkan banyak kesalahan 404 masalah, dan hal ini tidak perlu untuk membuat $lokasi.pencarian bekerja dalam kasus ini. Dalam kasus saya saya ingin menangkap URL query string parameter ketika pengguna datang ke situs saya, terlepas dari mana "page" awalnya mereka link ke anda, DAN dapat mengirim mereka ke halaman yang setelah mereka masuk. Jadi saya hanya menangkap semua barang yang ada di aplikasi.menjalankan
$rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) {
if (fromState.name === "") {
e.preventDefault();
$rootScope.initialPage = toState.name;
$rootScope.initialParams = toParams;
return;
}
if ($location.search().hasOwnProperty('role')) {
$rootScope.roleParameter = $location.search()['role'];
}
...
}
kemudian setelah login saya dapat mengatakan $negara.pergi($rootScope.initialPage, $rootScope.initialParams)
It's sedikit terlambat, tapi saya pikir masalah anda adalah URL anda. Jika bukan
http://127.0.0.1:8080/test.html?target=bob
anda telah
http://127.0.0.1:8080/test.html#/?target=bob
I'm cukup yakin itu akan bekerja. Sudut adalah benar-benar pilih-pilih tentang #/