Apa's paling ringkas cara untuk membaca parameter kueri di AngularJS?

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.

Untuk referensi, berikut ini adalah kerja jsFiddle: http://web.archive.org/web/20130317065234/http://jsfiddle.net/PHnLb/7/

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/>

    target=Pawel

</div>

Untuk memberikan sebagian jawaban pertanyaan saya sendiri, berikut ini adalah contoh untuk browser HTML5:

  <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>



Target: {{target}}<br/>

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:

1. Menggunakan $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;
  }

2. Menggunakan $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&param2=def

Anda dapat membuatnya bekerja dengan menambahkan #/ di URL. http://localhost/test#/?param1=abc&param2=def

$lokasi.pencarian() untuk kembali suatu objek seperti:

{
  param1: 'abc',
  param2: 'def'
}

$lokasi.pencarian() akan bekerja hanya dengan HTML5 mode diaktifkan dan hanya mendukung browser.

Ini akan bekerja selalu:

$jendela.lokasi hotel ini.pencarian

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'}




  <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>



Target: {{target}}<br/>




($location.search()).target

anda juga bisa menggunakan $lokasi.$$pencarian.yourparameter

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 #/