Several optional parameters in Angular.js
I usually use querystrings to filter the results, for example:
URL: /Events/List?type=art&city=miami&life=present
I can put them in any order and get the same results, for example:
URL: /Events/List?city=miami&life=present&type=art
URL: /Events/List?life=present&type=art&city=miami
I can also make them optional, for example:
URL: /Events/List?type=art,
or: /Events/List?type=art&life=&city=
Question: How can I achieve the same "effect" with Angular.js routes? given the fact that parameters are passed in all "RESTful" ways in Angular
I thought something like this:
URL: /Events/List/city/miami/life/present/type/art
What can I achieve with a route like this:
.when('/Events/List/city/:city?/life/:life?/type/:type?', { ... }
But I already see a lot of problems:
- The order of the parameters is important (would I need to define a route many times?)
- Additional options provide non-intuitive URL-address,
for example/Events/List/city/life/type/art
,
and it does not apply to optional querystrings (they are more clear to read, I think):
for example:/Events/List/?city=&life=&type=art
source to share
If you want to use query strings angular has $location.search()
that is both an installer and a receiver.
The difference between angular search
and the window version location.search
is that the request crashes after the url has been hashed, and when set up or retrieved, it uses objects, not strings
See Using $ location in the developer guide
source to share
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'}
source to share
I recently ran into a similar need (the ability to grab an unknown number of arguments from a path) and started by looking at $ routeProvider. I ended up ditching this effort in favor of ui.router .
The most powerful (but arguably tedious) approach for you is to work with regex parameters. Consider the following (snippet from some code I'm currently creating):
$stateProvider
.state("list", {
url: "/",
controller: "PluginsListController",
templateUrl: "PluginsList.html"
})
.state("path", {
url: "/{plugin}/*path",
controller: "PluginDetailsController",
templateUrl: "PluginDetails.html"
})
;
The second state takes two positional parameters: a plugin
and a path
. The argument path
is a wildcard that captures everything after the immediately preceding slash. The idea here is that I can put 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 "to $stateParams["path"]
. It depends on the application logic to handle the long path parameter (and you are also responsible for using this variable length argument), but this approach allows you to write a single state handler for an unknown number of URLs.
source to share