Wat's de meest beknopte manier om query parameters in AngularJS te lezen?

Question

Meer

Bron Niet AMP-versie Bewerken

Wat's de meest beknopte manier om query parameters in AngularJS te lezen?

Ik'wil graag de waarden van URL query parameters lezen met behulp van AngularJS. Ik'heb toegang tot de HTML met de volgende URL:

http://127.0.0.1:8080/test.html?target=bob

Zoals verwacht, location.search is "?target=bob". Voor het benaderen van de waarde van target, heb ik verschillende voorbeelden gevonden op het web, maar geen van hen werkt in AngularJS 1.0.0rc10. In het bijzonder, de volgende zijn allemaal undefined:

$location.search.target
$location.search['target']
$location.search()['target']

Weet iemand wat zal werken? (Ik gebruik $location als parameter voor mijn controller)

Bijwerken:

Ik'heb hieronder een oplossing geplaatst, maar ik'ben er niet helemaal tevreden mee. In de documentatie bij Developer Guide: Angular Services: Using $location staat het volgende over $location:

Wanneer moet ik $location gebruiken?

Elke keer als je applicatie moet reageren op een verandering in de huidige URL of als u de huidige URL in de browser wilt wijzigen.

Voor mijn scenario, zal mijn pagina worden geopend vanaf een externe webpagina met een query parameter, dus ik'ben niet "reageren op een verandering in de huidige URL" per se. Dus misschien is $location'niet de juiste tool voor de job (voor de lelijke details, zie mijn antwoord hieronder). Ik'heb daarom de titel van deze vraag veranderd van "Hoe query parameters lezen in AngularJS met behulp van $location?" naar "Wat'is de meest beknopte manier om query parameters te lezen in AngularJS?". Uiteraard zou ik gewoon javascript en reguliere expressie kunnen gebruiken om location.search te parsen, maar zo laag-niveau gaan voor zoiets basaals stoot echt tegen mijn programmeurs gevoeligheden.

Dus: is er een betere manier om $location te gebruiken dan ik in mijn antwoord doe, of is er een beknopt alternatief?

Damjan Pavlica

Bewerkte vraag 28ste1 juli 2015 в 4:20

Programmering

angularjs ngroute

16de5 juni 2012 в 1:03

22 views

Andrew Joslin · Answer 1 · 2012-06-16T14:57:17+00:00

Je kunt $routeParams (vereist ngRoute) in je controller injecteren. Hier's een voorbeeld uit de docs:

// 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: Je kunt ook query parameters ophalen en instellen met de $location service (beschikbaar in ng), met name zijn search methode: $location.search().

$routeParams zijn minder nuttig na het initieel laden van de controller';$location.search()` kan op elk moment worden aangeroepen.

pkozlowski.opensource · Answer 2 · 2012-07-16T17:56:48+00:00

Goed dat je er in geslaagd bent om het werkend te krijgen met de html5 mode maar het is ook mogelijk om het werkend te krijgen in de hashbang mode.

Je zou simpelweg kunnen gebruiken:

$location.search().target

om toegang te krijgen tot de 'target' zoek param.

Voor de referentie, hier is de werkende 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>

Ellis Whitehead · Answer 3 · 2012-06-17T06:37:15+00:00

Om een gedeeltelijk antwoord te geven op mijn eigen vraag, is hier een werkend voorbeeld voor HTML5 browsers:




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

De sleutel was om $locationProvider.html5Mode(true); aan te roepen zoals hierboven gedaan. Het werkt nu bij het openen van http://127.0.0.1:8080/test.html?target=bob. Ik'ben niet blij met het feit dat het niet zal werken in oudere browsers, maar ik ga deze aanpak misschien toch gebruiken.

Een alternatief dat zou werken met oudere browsers zou zijn om de html5mode(true) aanroep te laten vallen en in plaats daarvan het volgende adres met hash+slash te gebruiken:

http://127.0.0.1:8080/test.html#/?target=bob

De relevante documentatie is te vinden in Developer Guide: Angular Services: Using $location (vreemd dat mijn google search dit niet gevonden heeft...).