Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular ui-router dynamic querystring definition

We have a search page and we have thousands of search attributes that can define by an admin panel. A characteristic search result page has a url like that:

http://example.com/search?a12=3213&a314=412412&a247=1941829&....

When we want to implement that page as a SPA with AngularJS by using angular-ui-router, I couldn't understand, how can we define that route configuration and how can we read all search parameters from querystring. Because ui-router forces to define every queryparam possibilities on route configuration to use them in $stateParams.

$stateProvider.state('search', {
    url: '/search?a1&a2&a3&a4&a5' // what about a1314?
    controller: function ($stateParams) {
        console.log($stateParams.a1314);
    }
});

Do you know a workaround?

like image 922
Murat Çorlu Avatar asked Dec 29 '14 21:12

Murat Çorlu


People also ask

What is the use of queryParams in Angular?

Query parameters are used to pass optional params to the Angular route.

What is Angular UI Router?

Angular UI-Router is a client-side Single Page Application routing framework for AngularJS. Routing frameworks for SPAs update the browser's URL as the user navigates through the app.

How do I get query parameters in Angular 13?

import ActivatedRoute from '@angular/router'. Inject ActivatedRoute class in constructor. Access queryParams property of ActivatedRoute class which returns an observable of the query parameters that are available in the current URL route.


1 Answers

you can use $location.search() in url: '/search' search route's controller

it return search part (as object) of current url when called without any parameter.

var searchObject = $location.search();

// => {a12: '3213', a314: '412412'}

console.log(searchObject .a12); //3213

and for route you can use

 url: '/search*' 

so it will match

like image 119
A.B Avatar answered Sep 17 '22 21:09

A.B