I have multiple states in my app, which i define using a $stateProvider like this:
.state(STATES.s1,
{
url: "/?refnr"
template: ...
})
.state(STATES.s2,
{
url: "/?details&searchID&pos"
template: ...
})
Now i want to have a third state, where i want to catch all the urls containing a specific url param, which includes an exclamation mark. This is the parameter 'emp!' and looks like this in url with a value ".../?emp!=45".
I defined this as my state:
.state(STATES.s3,
{
url: "/?emp!"
template: ...
})
Does not work. It does not match the url.. I also tried to use a $urlMatcherFactoryProvider and supply a compiled matcher as url, but same result.
I also tried to use the encoded version of ! in my state url definition like this:
url: "/?emp%21"
still same result.
Why is that so? How can i match these urls?
You can use a trick of fake parameter as this sample and this will handle all your urls ending with "/?emp!
.state(STATES.s3,
{
url: "/:anyurl/?emp!"
template: ...
})
Try something like this. The expression between curly braces is a regular expression matching your criteria.
.state(STATES.s3, {
url: "/{^\?.*emp!$}"
template: ...
})
That regex will match urls that start with the ?, ends with ! and has emp before !. like:
?hemp!
?param=value&temp!
Related
I want to define any in url whit angular ui-router
in angular self router we can define a route like this:
$routeProvider.when('/:params*', {
template: 'test',
})
and when call this url
/a/b/c
it's work
how can do same in angular ui-router
For eager matching of URL parameters, use:
$stateProvider
.state('all', {
url: "/*params",
template: "test"
});
//OR
$stateProvider
.state('all', {
url: "/{params:.*}",
template: "test"
});
From the Docs:
URL Regex Parameters
Examples:
'/files/{path:.*}' - Matches any URL starting with '/files/' and captures the rest of the path into the parameter 'path'.
'/files/*path' - Ditto. Special syntax for catch all.
— UI-Router Wiki URL-Routing regex parameters
Here's an example with these two routes:
.state("test", {
url: "/test/{path}",
template: "<div ui-view></div>"
})
.state("test.child", {
url: "/child",
template: "<p>child</p>"
})
The following urls would be valid:
/test/thing would render test's view and $stateParams.path is "thing"
/test/thing/other would render test's view and $stateParams.path is "thing/other"
/test/thing/child would render test.child's view and $stateParams.path is "thing"
/test/thing/other/child would render test.child's view and $stateParams.path is "thing/other"
I have tried using a regexp on the path param so that it would take any string except anything that ends in "/child", but that would only redirect me to my default state since there is no match with the regexp.
My current workaround is to use another separator, such as , instead of / for my path param (gives me these kind of urls: /test/thing,other/child), and I'm gonna keep using that for now, but I was still wondering if anything of the sort was possible.
try:
app.config(function ($stateProvider) {
$stateProvider
.state("test-child", {
url: "/test/{path:.*}/child",
template: "<h1>CHILD's view</h1>"
})
.state("test", {
url: "/test/{path:.*}",
template: "<h1>TEST's view</h1>"
})
});
plunker: http://plnkr.co/edit/DTO8sNr67am07csFOxR9?p=preview
i am trying to pass a web address as a parameter between views in angular but it is not working.
i am using the uiRouter and have nested states.
here is the code:
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.chat-detail', {
url: '/home/:url1/:url2',
views: {
'tab-home': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
i am passing links in the url as:
href="#/tab/home/www.somepage.com/nesteded?id=99/www.second.com/page/one/more"
i am sure the slashes / are causing the problem here.
Your problem is that www.second.com/page/one/more is missing a protocol. Without the protocol if you just pass that to href browser will interpret it as a relative url.
You either need to correct the source or parse the source to check if it has a protocol before using it in your view
Without more code provided there isn't much more help can be provided
Use percent encoding: https://en.wikipedia.org/wiki/Percent-encoding. For a slash, you need to put %2F instead. Use a URL encoder/decoder to do it: http://www.url-encode-decode.com/
Input is http://www.somepage.com/nesteded?id=99, so your URL encoded URL would be http%3A%2F%2Fwww.somepage.com%2Fnesteded%3Fid%3D99, and your link <a href="#/tab/home/http%3A%2F%2Fwww.somepage.com%2Fnesteded%3Fid%3D99/http%3A%2F%2Fwww.second.com%2Fpage%2Fone%2Fmore">
You can write a filter link in this stack overflow question to make it easier: How to generate url encoded anchor links with AngularJS?
I am using ngTable that use filters in the format filter[foo], filter[bar], sorting[foo], sorting[bar].
I want to pass this parameters as URL, but as I am using UI Router, I need to declare them in the state definition.
So I tried to setup a state like this
.state('admin.results', {
url: '/results?filter[foo]',
templateUrl: 'app/results.tpl.html',
controller: 'ResultCtrl'
})
but the square brackets look to be interpreted as a regex, so I get an error like this
Invalid parameter name 'filter[foo]' in pattern '/results?filter[foo]'
I also tried escaping the brackets url: '/results?filter\[foo\]' but again I receive the same error.
You can try it in this plunkr.
Try:
$routeProvider.when('/results/:filter', {
controller: 'typeFormController',
templateUrl: 'app/results.tpl.html'
});
And in your controller use $routeParams.filter to get your filter
I am using ui-router to represent states in my AngularJS app. In it I'd like to change the state without changing the URL (basically a "detail view" is updated but this should not affect the URL).
I use <a ui-sref="item.detail({id: item.id})"> to display the detail but this only works if I specify a URL like url: "/detail-:id" in my $stateProvider.
It seems to me that the current state is only defined through the URL.
Just an additional information for new comers to this post:
Declaration of params in a state definition has changed to params: { id: {} } from params: ['id']
So be aware :)
Source: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider
Thanks for your answer, it did help me in the right direction but I'd just like to add a more complete description.
In my specific issue there was a complicating factor because the state I needed to inject a non-URL parameter to was a child state. That complicated things slightly.
The params: ['id'] part goes in the $stateProvider declaration like this:
$stateProvider.state('parent', {
url: '/:parentParam',
templateUrl: '...',
controller: '...'
}).
state('parent.child', {
params: ['parentParam','childParam'],
templateUrl: '...',
controller: '...'
});
And the param name is connected to the ui-sref attribute like this:
<a ui-sref=".child({ childParam: 'foo' })">
And the catch is this:
If the parent state also has a URL parameter then the child needs
to also declare that in its params array. In the example above "parentParam" must be included in the childstate.
If you don't do that then a module-error will be thrown when the application is initialized. This is at least true on the latest version at the time of writing (v.0.2.10).
EDIT
#gulsahkandemir points out that
Declaration of params in a state definition has changed to params: {
id: {} } from params: ['id']
Judging by the changelog, this seems to be the case starting from v0.2.11
Details of params can be found in the official docs
I now figured out, that you need to use the params: ['id'] property of the state in order to have the key not stripped when not using a URL.