I'm using angular^1.8.0 and I have several substates that I would like to all have access to a common URL parameter. I don't have any route at /.
Here's an example of what I mean:
$stateProvider
.state('app', {
url: '?hl', // also tried /?hl
resolve: {
handleHl: function($stateParams) {
console.log($stateParams); // outputs { hl: undefined ... } for all routes
}
}
})
.state('app.dashboard', {
url: '/dashboard'
});
Is there any way to make this work? Or do I have to edit the url parameter of all the substates?
You defined a query param, and you want to see it in state params.
According to the ui-router doc:
The state params should be start with :
:hl
The query params can be specified following a '?'
?hl
Related
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'm curious if there's a way to configure UI-Router to accept a query string parameter for all routes in an application.
For context, I have a resolve handler on all of my application's routes, which takes in a query parameter and triggers some behaviour based on that parameter. Here's a reduced version of my application's state definitions:
$stateProvider
.state('state1', {
url: '/state1?myparam'
resolve: myHandler,
templateUrl: 'state1.html',
controller: 'Ctrl1',
})
.state('state2', {
url: '/state2?myparam',
resolve: myHandler,
// [etc]
})
.state('state2.child1', {
url: '/state2/child1?myparam',
resolve: myHandler,
// [etc]
})
// [and a bunch more similar '.state's];
This works fine, and I'm able to access the myparam value inside of myHandler via $stateParams. It just seems a bit repetitive to add ?myparam to every route definition's url.
Any suggestions?
Did you tried using $urlMatcherFactory.
Snippet:
var urlMatcher = $urlMatcherFactory.compile("/state2/:id?param1");
$stateProvider.state('myState', {
url: urlMatcher
});
Hope this query params and urlMatcherFactory filehelps you.
P.S: I did not test this code.
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 have these states:
.state('message', {
url : '/message'
templateUrl : 'views/message.html',
controller : 'messageController'
})
.state('news', {
url : '/news'
templateUrl: 'views/news.html',
controller : 'newsController'
})
In messageController i append some query string in url like /message?contact=some.
problem is that when go to news state with ui-sref, query strings does not cleared and it redirects to /news?contact=some.
i tried to clear $location.search in stateChangeEvent.
any help?
You can do one of the following:
Use query params:
.state('message', {
url: "/message?contact"
// will match to url of "/message?contact=value"
...
}
Use state params: (better for ui-sref linking)
.state('message', {
url: "/message/:contact",
// can be accessed by $stateParams service - $stataParams['contact']
...
}