Cara mendapatkan parameter url menggunakan AngularJS


199

Kode sumber HTML

<div ng-app="">
    <div ng-controller="test">
      <div ng-address-bar browser="html5"></div>
      <br><br>
      $location.url() = {{$location.url()}}<br>
      $location.search() = {{$location.search('keyword')}}<br>
      $location.hash() = {{$location.hash()}}<br>     
      keyword valus is={{loc}} and ={{loc1}}
  </div>
</div>

Kode sumber AngularJS

<script>
function test($scope, $location) {
  $scope.$location = $location;
  $scope.ur = $scope.$location.url('www.html.com/x.html?keyword=test#/x/u');
  $scope.loc1 = $scope.$location.search().keyword ;    
    if($location.url().indexOf('keyword') > -1){    
        $scope.loc= $location.url().split('=')[1];
        $scope.loc = $scope.loc.split("#")[0]        
    }
  }
 </script>

Di sini variabel locdan loc1keduanya mengembalikan tes sebagai hasil untuk URL di atas. Apakah ini cara yang benar?


1
Anda mungkin ingin memeriksa $ routeParams .
Nick Heiner

Tidak jelas apa yang Anda tanyakan di sini ... $ routeParams dan $ location # methods docs akan membantu Anda memulai
deck

7
Harap pertimbangkan untuk menambahkan komentar saat memilih agar pertanyaannya dapat diperbaiki. Terima kasih.
praveenpds

Jawaban:


314

Saya tahu ini adalah pertanyaan lama, tetapi saya perlu waktu untuk menyelesaikannya mengingat dokumentasi Angular yang jarang. The RouteProvider dan routeParams adalah cara untuk pergi. Rute menghubungkan URL ke Controller / View Anda dan routeParams dapat diteruskan ke controller.

Lihatlah proyek benih Angular . Di dalam app.js Anda akan menemukan contoh untuk penyedia rute. Untuk menggunakan params cukup tambahkan mereka seperti ini:

$routeProvider.when('/view1/:param1/:param2', {
    templateUrl: 'partials/partial1.html',    
    controller: 'MyCtrl1'
});

Kemudian di controller Anda menyuntikkan $ routeParams:

.controller('MyCtrl1', ['$scope','$routeParams', function($scope, $routeParams) {
  var param1 = $routeParams.param1;
  var param2 = $routeParams.param2;
  ...
}]);

Dengan pendekatan ini Anda dapat menggunakan params dengan url seperti: " http://www.example.com/view1/param1/param2 "


2
Perhatikan bahwa baris terakhir dari contoh ini });adalah}]);
Andrew Lank

44
Juga bisa mendapatkan parlam arbitrer lainnya dalam bentuk string kueri /view/1/2?other=12dengan $routeParams.other
DavidC

Saya pikir Anda memiliki 'var param1' diulang di controller Anda. Saya tidak dapat mengedit perubahan sederhana seperti itu.
Tom

Angular membuatnya sangat mudah, dan juga jawaban Anda sangat bagus deskriptif
Mohammad Kermani

1
Tetapkan dan kirim contoh: var param1 = "abc"; $ location.path ('/ view1 /:' + param1); $ route.reload ();
Robot70

158

Meskipun perutean memang merupakan solusi yang baik untuk penguraian URL tingkat aplikasi, Anda mungkin ingin menggunakan layanan yang lebih rendah $location, seperti yang disuntikkan di layanan atau pengontrol Anda sendiri:

var paramValue = $location.search().myParam; 

Sintaks sederhana ini akan berfungsi untuk http://example.com/path?myParam=paramValue. Namun, hanya jika Anda mengonfigurasi $locationProviderdalam mode HTML 5 sebelumnya:

$locationProvider.html5Mode(true);

Kalau tidak, lihat di http://example.com/#!/path?myParam=someValue sintaks "Hashbang" yang sedikit lebih rumit, tetapi manfaatkan bekerja pada browser lama (tidak kompatibel dengan HTML 5) sebagai baik.


16
sepertinya Anda harus menambahkan $ locationProvider.html5mode (true) sebagai konfigurasi modul seperti: angular.module ("myApp", []). config (function ($ locationProvider) {$ locationProvider.html5Mode (true);});
sq1020

4
Dan html5Mode membutuhkan <base href="http://example.com/en/" />tag di blog Anda index.html.
cespon

1
apa yang saya sukai dari solusi Anda adalah bahwa Anda bahkan dapat melewatkan objek, dan Anda mendapatkannya sebagai objek.
Shilan

2
Mungkin juga untuk tidak menambahkan tag <base> dan menetapkannya seperti ini:.config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ enabled: true, requireBase: false }); }])
Guillaume

1
Di Angular 1.5.8, saya tidak perlu mengkonfigurasi $locationProvideragar ini berfungsi. http://example.com/path#?someKey=someVal, lalu $location.search().someKey // => 'someVal'
jiminikiz


11

Saya menemukan solusi cara menggunakan $ location.search () untuk mendapatkan parameter dari URL

pertama di URL Anda harus meletakkan sintaks "#" sebelum parameter seperti contoh ini

"http://www.example.com/page#?key=value"

dan kemudian di controller Anda, masukkan $ location dalam fungsi dan gunakan $ location.search () untuk mendapatkan parameter URL

.controller('yourController', ['$scope', function($scope, $location) {

     var param1 = $location.search().param1; //Get parameter from URL

}]);

Ini berfungsi untuk parameter kueri dan jawaban @jeff di bawah ini untuk variabel path
Abdeali Chandanwala


1
function GetURLParameter(parameter) {
        var url;
        var search;
        var parsed;
        var count;
        var loop;
        var searchPhrase;
        url = window.location.href;
        search = url.indexOf("?");
        if (search < 0) {
            return "";
        }
        searchPhrase = parameter + "=";
        parsed = url.substr(search+1).split("&");
        count = parsed.length;
        for(loop=0;loop<count;loop++) {
            if (parsed[loop].substr(0,searchPhrase.length)==searchPhrase) {
                return decodeURI(parsed[loop].substr(searchPhrase.length));
            }
        }
        return "";
    }

0

Cara sederhana dan mudah untuk mendapatkan nilai url

First add # to url (e:g -  test.html#key=value)

url in browser (https://stackover.....king-angularjs-1-5#?brand=stackoverflow)

var url = window.location.href 

(output: url = "https://stackover.....king-angularjs-1-5#?brand=stackoverflow")

url.split('=').pop()
output "stackoverflow"

0

Saat menggunakan angularjs dengan express

Pada contoh saya, saya menggunakan angularjs dengan express melakukan routing sehingga menggunakan $ routeParams akan mengacaukan routing saya. Saya menggunakan kode berikut untuk mendapatkan apa yang saya harapkan:

const getParameters = (temp, path) => {
  const parameters = {};
  const tempParts = temp.split('/');
  const pathParts = path.split('/');
  for (let i = 0; i < tempParts.length; i++) {
    const element = tempParts[i];
    if(element.startsWith(':')) {
      const key = element.substring(1,element.length);
      parameters[key] = pathParts[i];
    }
  }
  return parameters;
};

Ini menerima templat URL dan jalur dari lokasi yang diberikan. Saya hanya menyebutnya dengan:

const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $location.path()); 

Menyatukan semuanya controller saya adalah:

.controller('TestController', ['$scope', function($scope, $window) {
  const getParameters = (temp, path) => {
    const parameters = {};
    const tempParts = temp.split('/');
    const pathParts = path.split('/');
    for (let i = 0; i < tempParts.length; i++) {
      const element = tempParts[i];
      if(element.startsWith(':')) {
        const key = element.substring(1,element.length);
        parameters[key] = pathParts[i];
      }
    }
    return parameters;
  };

const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $window.location.pathname);
}]);

Hasilnya adalah:

{ table: "users", id: "1", place_id: "43", interval: "week" }

Semoga ini bisa membantu seseorang di luar sana!

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.