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
Related
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!
I am running into trouble understanding how you can correctly pass parameters using AngularJS.
This is the code I was trying to use in my app.js file for the nested views, however, the nest state never properly renders.
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('news', {
url: '/news',
templateUrl: 'templates/news.html',
controller: 'NewsCtrl'
})
.state('news.id', {
url: '/news/:id',
templateUrl: 'templates/news.id.html',
controller: 'NewsCtrl'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/news');
})
It will try and change the url to #/news/news/:id versus just #/news/:id.
And if I try and change the path to just be the #/news/:id, then the pages do not render correctly.
What is the best approach to achieve these nested views with parameters?
According to ui-route wiki:
When using url routing together with nested states the default
behavior is for child states to append their url to the urls of each
of its parent states.
If you want to have absolute url matching, then you need to prefix
your url string with a special symbol '^'.
So in your case, you should try
.state('news.id', {
url: '^/news/:id',
templateUrl: 'templates/news.id.html',
controller: 'NewsCtrl'
});
I have a state like this in $stateProvider
$stateProvider.state('rubricacontatti.home', {
url: '/home/:section',
templateUrl: 'rubricacontatti/static/html/rubricacontatti.home.html',
});
and I must pass param section programmatically without using ui-sref or $state.go. Due to project choises I'm constrained to use this:
route: 'rubricacontatti.home'
How can I pass param to route?
I'm not sure how you are programmatically getting the value but the stateConfig has a params property that takes an object with any number of properties. Should be able to set it their.
$stateProvider.state('rubricacontatti.home', {
url: '/home/:section',
templateUrl: 'rubricacontatti/static/html/rubricacontatti.home.html',
params: {
myParam1: "programmatically set value"
}
});
See the $stateProvider docs.
I have this simple state :
.state('search', {
url: '/search',
templateUrl: 'views/search.html',
controller: 'search'
})
And I would like to pass any extra unplanned parameters to the controller when using search state or /search route :
ui-sref="search({foo:1, bar:2})"
// would call '#/search?foo=1&bar2',
// match the state and pass foo and bar to the controller (through $stateParams)
When I try this, it matches the otherwise of the router instead. :(
I've read a lot of solutions that imply to declare each parameter in the state:
.state('search', {
url: '/search?param1¶m2¶m3?...',
})
But I cannot do this as far as the parameters list is not really defined and changes all the time depending on searched content.
Is there a way to achieve this ? Or am I wrong somewhere ?
Thx.
EDIT : When I try to call directly this url : #/search?foo=1, the state search matches but the foo parameter never goes to $stateParams which is empty. I don't know how to get it in.
.state('search', {
params: ['param1','param2','param3'],
templateUrl: '...',
controller: '...'
});
ui-sref="search({param1:1, param2:2})"
Credit goes to Parameters for states without URLs in ui-router for AngularJS
I'm trying to configure my AngularJS app with optional route parameter.
The URLs that I need to support may have a locale at the beginning. e.g.
/fr-FR/Welcome
/Welcome
I tried the following
$routeProvider.when('/:locale?/Welcome', {
...
})
However, it seems, it satisfies the "/fr-FR/Welcome" case and not the "/Welcome" case.
Is it because I'm always prepending a "/" in the beginning.
Will the following work?
$routeProvider.when('/:locale/?Welcome', {
...
})
https://docs.angularjs.org/api/ngRoute/service/$route#example
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController',
resolve: {
}
})
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});
Also you can use for multiple language support like this tutorials
https://scotch.io/tutorials/internationalization-of-angularjs-applications
It is not possible in Angular.
remember /:locale is not optional. it is route parameter which means its value could be different but it should be there to execute that route (controller and template).
like
/fr/Welcome
/en/Welcome
fr and en must be there which help angular to select that route.