jak przekazywać querystring na trasach kątowych?

Question

Pracuję z trasami AngularJS i próbuję zobaczyć, jak pracować z ciągami zapytań (na przykład url.com?key=value). Kanciasty nie zrozumieć drogę, która zawiera parę klucz-wartość dla tej samej nazwie albums:

angular.module('myApp', ['myApp.directives', 'myApp.services']).config(
     ['$routeProvider', function($routeProvider) { 
      $routeProvider. 
      when('/albums', {templateUrl: 'albums.html', controller: albumsCtrl}). 
      when('/albums?:album_id', {templateUrl: 'album_images.html', controller: albumsCtrl}). 
      otherwise({redirectTo: '/home'}); 
     }], 
     ['$locationProvider', function($locationProvider) { 
      $locationProvider.html5Mode = true; 
     }] 
    ); 

Answer 1

Nie sądzę trasy pracować z zapytaniem smyczki. Zamiast url.com?key=value można użyć bardziej relaksującego URL podobnego url.com/key/value? Następnie należy określić swoje trasy w następujący sposób:

.when('/albums', ...) 
.when('/albums/id/:album_id', ...) 

czy może

.when('/albums', ...) 
.when('/albums/:album_id', ...) 

Answer 2

params użycie trasa

var Ctrl = function($scope, $params) { 
    if($params.filtered) { 
    //make sure that the ID is there and use a different URL for the JSON data 
    } 
    else { 
    //use the URL for JSON data that fetches all the data 
    } 
}; 

Ctrl.$inject = ['$scope', '$routeParams']; 

http://docs.angularjs.org/api/ng.$routeParams

Answer 3

można spojrzeć na metody search w $location (docs). Pozwala dodać kilka kluczy/wartości do adresu URL.

Na przykład $location.search({"a":"b"}); zwróci ten URL: http://www.example.com/base/path?a=b.

Answer 4

mogę myśleć tylko o dwóch usecases dla kwerendy w URL.

1) Jeśli potrzebujesz parę klucz/wartość swojej kwerendy w kontrolerze (np wydrukować Witaj {{nazwa}} i dostać nazwa w querystringu, taka jak? name = John), a następnie, jak powiedział Francios, wystarczy użyć $ location.search, a otrzymasz zapytanie jako obiekt ({imię: John}), którego możesz użyć, umieszczając go w polu widzenia lub czymś (np. $ scope.name = location.search(). name;).

Jeśli chcesz przekierować na inną stronę routera na podstawie tego, co jest podane w zapytaniu, np. (? Page = Thatpage.htm), utwórz przekierowanie: w routerzeProvider.when() i otrzyma obiekt wyszukiwania jako trzeci parametr. spojrzeć na 2:10 następnego egghead Wideo: http://www.thinkster.io/pick/SzcF8bGeVy/angularjs-redirectto

zasadzie redirectTo: function (routeParams, ścieżka, wyszukiwania) {return search.page}

Answer 5

Prawdą jest, że drogi nie działają z ciągów zapytań nie oznacza to jednak, że nie można używać ciągów zapytań do przekazywania danych między stronami podczas zmiany tras! Rażące ograniczenie parametrów trasy polega na tym, że nie można ich aktualizować bez ponownego ładowania strony. Czasem nie jest to pożądane, na przykład po zapisaniu nowego rekordu. Pierwotny parametr trasy wynosił 0 (oznaczający nowy rekord), a teraz chcesz go zaktualizować za pomocą poprawnego ID zwróconego przez ajax, tak aby po odświeżeniu strony zobaczył ich nowo zapisany rekord. Nie można tego zrobić za pomocą parametrów trasy, ale można tego dokonać za pomocą ciągów zapytań.

Tajemnicą nie jest uwzględnienie ciągu zapytania podczas zmiany trasy, ponieważ spowoduje to, że nie będzie zgodny z szablonem trasy. Możesz zmienić trasę, a następnie zastosować parametry ciągu zapytania. Zasadniczo

$location.path('/RouteTemplateName').search('queryStringKey', value).search(... 

Piękno tutaj jest to, że ciąg wartości traktuje obsługa zapytań $ routeParams identycznie do parametrów prawdziwa trasa, więc nawet nie trzeba aktualizować swój kod do obsługi je inaczej. Teraz możesz zaktualizować parametry bez ponownego ładowania strony przez włączenie opcji reloadOnSearch: false w definicji trasy.