Multiple optional parameters in Angular.js

Question

I typically use querystrings for filtering results, eg:

 URL:    /Events/List?type=art&city=miami&life=present

I can put them in any order and get the same results, eg:

 URL:    /Events/List?city=miami&life=present&type=art
 URL:    /Events/List?life=present&type=art&city=miami

I can also make them optional, eg:

 URL:    /Events/List?type=art, 
  or:    /Events/List?type=art&life=&city=

Question: How can I achieve this same "effect" with Angular.js routes? given the fact that parameters are passed all in a "RESTful" way in Angular

I was thinking in something like this:

 URL:   /Events/List/city/miami/life/present/type/art

Which I can achieve with a route like this:

 .when('/Events/List/city/:city?/life/:life?/type/:type?', { ... }

But I already see many problems:

Order of parameters is important (I would have to define many times the route?)
Optional parameters will give a non intuitive URL,
eg: /Events/List/city/life/type/art,

and this is not the case in optional querystrings (they are more intuitive to read I think):
eg: /Events/List/?city=&life=&type=art

mm no, I want one controller for all of those routes, just like in ASP.NET MVC I have one action that receives all those GET parameters — sports
– sports, Commented Sep 12, 2014 at 19:58

charlietfl · Accepted Answer · 2014-09-12 20:55:11Z

2

If you want to use query strings angular has $location.search() that is both a setter and getter.

The difference between angular search and window version location.search is the query falls after the url hash and when setting or getting it uses objects rather than strings

See Using $location in developer's guide

answered Sep 12, 2014 at 20:55

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sports Over a year ago

Marked as accepted because it clarifies that I can still use query strings combined with angular's URL's, that is: #/bla/bla?bla=bla

Joao Leal · Accepted Answer · 2014-09-12 20:04:08Z

1

You can inject $routeParams into your controller. Here's an example from the 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'}

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

answered Sep 12, 2014 at 20:04

Joao Leal

5,5521 gold badge15 silver badges23 bronze badges

Comments

Justin Bell · Accepted Answer · 2014-09-12 20:22:08Z

I recently encountered a similar need (the ability to grab an unknown quantity of arguments off the path), and had started off by looking at $routeProvider. I ultimately abandoned that effort in favor of ui.router.

The most powerful (but possibly also tedious) approach for you would be to work with regex parameters. Consider the following (a snippet from some code I'm currently authoring):

$stateProvider
    .state("list", {
        url: "/",
        controller: "PluginsListController",
        templateUrl: "PluginsList.html"
    })
    .state("path", {
        url: "/{plugin}/*path",
        controller: "PluginDetailsController",
        templateUrl: "PluginDetails.html"
    })
;

The second state accepts two positional parameters: a plugin and a path. The path argument is a wildcard, that grabs everything after the immediately preceding slash. The idea here is that I can specify something like http://www.myfirsturl.com/app/MyFirstPlugin/level1/level2/level2.php, and end up with "MyFirstPlugin" in $stateParams["plugin"] and "level1/level2/level2.php" in $stateParams["path"]. It's up to the application logic to handle the long path parameter (and you would be likewise responsible for consuming this variable-length argument), but this approach does allow you to write a single state handler for an unknown number of url paths.

Collectives™ on Stack Overflow

Multiple optional parameters in Angular.js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related