angularjs - reactivos - cómo pasar la cadena de consulta en las rutas angulares?
ng-bind-html angularjs (5)
Estoy trabajando con rutas AngularJS, y estoy tratando de ver cómo trabajar con cadenas de consulta (por ejemplo, url.com?key=value ). Angular no entiende la ruta que contiene el par clave-valor para los albums del mismo nombre:
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;
}]
);
Es correcto que las rutas no funcionan con cadenas de consulta, sin embargo, eso no significa que no pueda usar cadenas de consulta para pasar datos entre páginas al cambiar de ruta. La limitación evidente con los parámetros de ruta es que no pueden actualizarse sin volver a cargar la página. Algunas veces esto no es deseado, por ejemplo después de guardar un nuevo registro. El parámetro de ruta original era un 0 (para significar un nuevo registro), y ahora desea actualizarlo con la ID correcta devuelta a través de ajax, de modo que si el usuario actualiza la página, ve su registro recientemente guardado. No hay forma de hacer esto con los parámetros de ruta, pero esto se puede lograr mediante el uso de cadenas de consulta.
El secreto no es incluir la cadena de consulta al cambiar la ruta, porque eso hará que no coincida con la plantilla de ruta. Lo que puede hacer es cambiar la ruta y luego aplicar los parámetros de cadena de consulta. Básicamente
$location.path(''/RouteTemplateName'').search(''queryStringKey'', value).search( ...
La belleza aquí es que el servicio $ routeParams trata los valores de cadena de consulta de forma idéntica a los parámetros de ruta reales, por lo que ni siquiera tendrá que actualizar su código para manejarlos de manera diferente. Ahora puede actualizar los parámetros sin volver a cargar la página incluyendo reloadOnSearch: false en su definición de ruta.
No creo que las rutas funcionen con cadenas de consulta. En lugar de url.com?key=value ? url.com?key=value puede usar una URL RESTful como url.com/key/value? Entonces definirías tus rutas de la siguiente manera:
.when(''/albums'', ...)
.when(''/albums/id/:album_id'', ...)
o tal vez
.when(''/albums'', ...)
.when(''/albums/:album_id'', ...)
Puede ver el método de search en $location ( docs ). Le permite agregar algunas claves / valores a la URL.
Por ejemplo, $location.search({"a":"b"}); devolverá esta URL: http://www.example.com/base/path?a=b .
Solo puedo pensar en dos casos de uso para la cadena de consulta en URL:
1) Si necesita el par clave / valor de su cadena de consulta en su controlador (por ejemplo, para imprimir Hola {{nombre}} y obtener el nombre en cadena de consulta, como? Nombre = Juan), entonces, como dijo Francios, simplemente use $ ubicación. busque y obtendrá la cadena de consulta como un objeto ({nombre: John}) que luego puede usar poniéndolo en alcance o algo (por ejemplo, $ scope.name = location.search (). name;).
Si necesita redireccionar a otra página en su enrutador en función de lo que se proporciona en la cadena de consulta, como (? Page = Thatpage.htm), luego cree una redirección a: en su enrutadorProveedor.when () y recibirá el objeto de búsqueda como su tercer parámetro. mira 2:10 del siguiente video de EggHead: http://www.thinkster.io/pick/SzcF8bGeVy/angularjs-redirectto
básicamente, redirigir a: función (routeParams, ruta, búsqueda) {return search.page}
use params de ruta
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''];