Jaki jest najbardziej zwięzły sposób odczytywania parametrów zapytania w AngularJS?

312

Chciałbym odczytać wartości parametrów zapytania URL za pomocą AngularJS. Uzyskuję dostęp do kodu HTML za pomocą następującego adresu URL:

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

Zgodnie z oczekiwaniami location.searchjest "?target=bob". Aby uzyskać dostęp do wartości celu , znalazłem różne przykłady wymienione w Internecie, ale żaden z nich nie działa w AngularJS 1.0.0rc10. W szczególności są to undefined:

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

Czy ktoś wie, co będzie działać? (Używam $locationjako parametru do mojego kontrolera)

Aktualizacja:

Poniżej zamieściłem rozwiązanie, ale nie jestem do końca z niego zadowolony. Dokumentacja na stronie Developer Guide: Angular Services: Korzystanie z $ location zawiera następujące informacje na temat $location:

Kiedy powinienem użyć $ location?

Za każdym razem, gdy aplikacja musi zareagować na zmianę bieżącego adresu URL lub jeśli chcesz zmienić bieżący adres URL w przeglądarce.

W moim scenariuszu moja strona zostanie otwarta z zewnętrznej strony internetowej z parametrem zapytania, więc per se nie reaguję na zmianę bieżącego adresu URL. Więc może $locationnie jest odpowiednie narzędzie do pracy (brzydkie szczegóły, patrz moja odpowiedź poniżej). Dlatego zmieniłem tytuł tego pytania z „Jak odczytać parametry zapytania w AngularJS za pomocą $ location?” na „Jaki jest najbardziej zwięzły sposób odczytywania parametrów zapytania w AngularJS?”. Oczywiście, mógłbym po prostu użyć javascript i wyrażeń regularnych do parsowania location.search, ale przejście do niskiego poziomu dla czegoś tak podstawowego naprawdę obraża moją wrażliwość programisty.

Więc: czy jest lepszy sposób na użycie $locationniż w mojej odpowiedzi, czy też jest zwięzła alternatywa?

angularjs ngroute

— Ellis Whitehead
źródło

1

Czy $ location.search () ['target'] nie powinno działać?

— okradać

To nie działa, ponieważ po ścieżce nie ma skrótu. http://127.0.0.1:8080/test.html#?target=bobbędzie działać, zwróć uwagę na #wcześniej ?. $locationto metoda routingu drugiego poziomu, która nie jest wysyłana do serwera.

— Daniel F

1

@DanielF @rob, oboje macie rację. $location.search()['target']działa po $locationProvider.html5Mode(true)został wywołany w nowoczesnej przeglądarce.

— krispy,

199

Możesz wstrzyknąć $ routeParams (wymaga ngRoute ) do swojego kontrolera. Oto przykład z dokumentów:

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

EDYCJA: Możesz również uzyskać i ustawić parametry zapytania za pomocą usługi $ location service (dostępna w ng), w szczególności jej searchmetody: $ location.search () .

$ routeParams są mniej przydatne po początkowym załadowaniu kontrolera; $location.search()można zadzwonić w dowolnym momencie.

— Andrew Joslin
źródło

1

Dzięki za sugestię i link! Przeczytałem stronę, a także próbowałem skonfigurować działającą próbkę. Jednak podejście to nie zadziała, ponieważ tak naprawdę nie chcę używać routingu w tym przypadku. Była to jednak pomocna sugestia i będę ją głosować, gdy będę mieć wystarczającą liczbę powtórzeń przepełnienia stosu.

— Ellis Whitehead,

1

Powiedziałbym, że odpowiedź @ pkozlowski.opensource jest bardziej dokładna w tej sytuacji

— Martín Coll

2

Niezupełnie… parametry zapytania są zawarte w obiekcie $ routeParams z normalnymi parametrami trasy. i możesz je odczytać / ustawić za pomocą $ location.search (). Dodam to do odpowiedzi.

— Andrew Joslin

5

Jakub ma rację. To są różne rzeczy. Kiedy używasz „wyszukiwania” w kanale kątowym, dodaje zapytanie do skrótu (koniec adresu URL). Specyfikacja RFC dla identyfikatora URI stwierdza, że parametry zapytania powinny poprzedzać (a nie dołączać) skrót. Zatem „wyszukiwanie” jest konstrukcją, która tylko kątowa będzie ekstrapolować i interpretować. Właśnie dlatego w powyższym rozwiązaniu działa tylko tryb HTML5, ponieważ delegujesz wszystkie żądania na jedną stronę (na poziomie serwera) niezależnie od faktycznego identyfikatora URI.

— Steven Pena

2

działa to tylko wtedy, gdy chcesz używać trasy w angularJS!

— windmaomao

189

Dobrze, że udało ci się uruchomić go w trybie HTML5, ale można również sprawić, aby działał w trybie hashbang.

Możesz po prostu użyć:

$location.search().target

aby uzyskać dostęp do parametru wyszukiwania „docelowego”.

Dla odniesienia, oto działający 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/>
    
    <button ng-click="changeTarget('Pawel')">target=Pawel</button>
    
</div>

Rozwiń fragment kodu

— pkozlowski.opensource
źródło

2

potrzebujesz nawiasów wokół $ location.search ()?

— Magne

2

@Magne: tak, potrzebujesz nawiasów, $ location.search to metoda docs.quarejs.org/api/ng/service/$location

— nandin

4

Nie zapominaj, że jeśli nie używasz, HTML5Mode(true)to tylko parametry po # / są dostępne lub zostaną dodane do adresu z # / na początku.

— Sebastian

21

@ nandin: Nie, nie potrzebujesz nawiasów w pobliżu $location.search() . Nie jestem pewien, dlaczego ta odpowiedź ich tam umieszcza.

— Dan Tao

9

Wydaje mi się, że @nandin źle zrozumiał pytanie „Czy potrzebujesz nawiasów”. Ci zrobić potrzebne nawiasach po wyszukiwania, ale nie te, które na całym całości $location.search().

— K. Carpenter

56

Aby udzielić częściowej odpowiedzi na moje pytanie, oto działająca próbka dla przeglądarek 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>

Kluczem było zadzwonić, $locationProvider.html5Mode(true);jak opisano powyżej. Teraz działa podczas otwierania http://127.0.0.1:8080/test.html?target=bob. Nie podoba mi się to, że nie będzie działać w starszych przeglądarkach, ale i tak mogę skorzystać z tego podejścia.

Alternatywą, która działałaby w starszych przeglądarkach, byłoby porzucenie html5mode(true)połączenia i użycie następującego adresu z krzyżykiem + ukośnikiem:

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

Odpowiednia dokumentacja znajduje się w Podręczniku programisty: Angular Services: Korzystanie z $ location (dziwne, że moje wyszukiwanie w Google nie znalazło tego ...).

— Ellis Whitehead
źródło

Dzięki za to. Wyciągam włosy, próbując odczytać parametry zapytania. Utrzymywano „niezdefiniowany”, jak wspomniano powyżej. Ustawienie trybu na HTML5 działało.

— sthomps

Czy nie należy ustawić ng-controlleratrybutu ? <body>MyApp

— Jago,

4

Wygląda na to, że zaczynając od Angular 1.3, aby użyć html5Mode, musisz albo dodać <base href="https://stackoverflow.com/" />tag, albo dodać requireBase: falsejako inny parametr do wywołania html5Mode. Szczegóły tutaj

— dae721,

17

Można to zrobić na dwa sposoby:

Za pomocą $routeParams

Najlepszym i zalecanym rozwiązaniem jest użycie go $routeParamsw kontrolerze. Wymaga zainstalowania ngRoutemodułu.

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

Korzystanie $location.search().

Jest tutaj zastrzeżenie. Będzie działać tylko w trybie HTML5. Domyślnie nie działa dla adresu URL, który nie zawiera hash ( #)http://localhost/test?param1=abc&param2=def

Możesz sprawić, by działało, dodając #/adres URL.http://localhost/test#/?param1=abc&param2=def

$location.search() aby zwrócić obiekt taki jak:

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

— Fizer Khan
źródło

5

Dzięki za radę z # /

— yonexbat

9

$ location.search () będzie działać tylko przy włączonym trybie HTML5 i tylko w obsługiwanej przeglądarce.

Działa to zawsze:

$ window.location.search

— Illidan
źródło

6

Tylko na lato.

Jeśli twoja aplikacja jest ładowana z zewnętrznych linków, to kątowy nie wykryje tego jako zmiany adresu URL, więc $ loaction.search () da ci pusty obiekt. Aby rozwiązać ten problem, musisz skonfigurować następujące opcje w konfiguracji aplikacji (app.js)

.config(['$routeProvider', '$locationProvider', function ($routeProvider,     $locationProvider) 
{
   $routeProvider
      .when('/', {
         templateUrl: 'views/main.html',
         controller: 'MainCtrl'
      })
      .otherwise({
         redirectTo: '/'
      });

      $locationProvider.html5Mode(true);
 }]);

— sapy
źródło

1

Tak. To był trudny do znalezienia. Dziękuję za komentarz.

— mikeborgh

2

Tylko precyzja do odpowiedzi Ellisa Whitehead'a. $locationProvider.html5Mode(true);nie będzie działać z nową wersją angularjs bez określenia podstawowego adresu URL aplikacji za pomocą <base href="">znacznika lub ustawienia parametru requireBasenafalse

Z dokumentu :

Jeśli skonfigurujesz $ location, aby używało html5Mode (history.pushState), musisz określić podstawowy adres URL aplikacji za pomocą znacznika lub skonfigurować $ locationProvider, aby nie wymagał znacznika podstawowego, przekazując obiekt definicji z wymaganiemBase: false do $ locationProvider. html5Mode ():

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

— S.Thiongane
źródło

1

możesz także użyć $ location. $$ search.yourparameter

— thewindev
źródło

18