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
Related
we have three pages in our app which can be classified under one parent page as below.
1)Parent
I)Child1
II)Child2
III)ChildIII
.state('Parent', {
url: '/Parent/:ID',
templateUrl: 'parent.html',
controller:'parentcontroller'
})
.state('Parent.Child1', {
url: '/Child1',
templateUrl: 'Child1.html'
})
.state('Parent.Child2', {
url: '/Child2',
templateUrl: 'Child2.html'
})
.state('Parent.Child3', {
url: '/Child3',
templateUrl: 'Child3.html'
})
sometimes we need to call this child pages sequentially one after another from child1 to child3 without parameters and sometimes we need to call those child pages individually but requests needs to go through parent controller so that we do not have to instantiate new controller instance for each one of those child pages. to accomplish this i'm using href but i want to be able to call parent and child with out passing any params.
working href ex: <a href='../Parent/{{ID}}/child1'
Not working ex: <a href='../Parent/child1'
can anyone please guide me to accomplish this?? Thanks!!
solution:
.state('Parent', {
url: '/Parent/:ID',
templateUrl: 'parent.html',
controller:'parentcontroller',
params:{ID:null}
})
.state('Parent.Child1', {
url: '/Child1',
templateUrl: 'Child1.html'
})
.state('Parent.Child2', {
url: '/Child2',
templateUrl: 'Child2.html'
})
.state('Parent.Child3', {
url: '/Child3',
templateUrl: 'Child3.html'
})
From HTML:<a ui-sref="(Parent.Child1{ID:{{value}}})">Home</a>
i wasn't aware that if we use SREF as above and controller declared at parent value can still read the params but gave a shot and it worked!!
Yes, you can do this. First you should define your params in your .state(), if you are passing params to child1 state, then it should defined by like below,
.state('Parent.Child1', {
url: '/Child1',
templateUrl: 'Child1.html',
params: {
paramName: '' //here paramName can be named by your wish.
}
})
after this you should pass the call the state and pass param in ui-sref like below,
<a ui-sref="Parent.Child1({paramName: scopeName})">Click</a>
here scopeName is the name of the scope which have the value to param, if you want hard code a string, then you can pass in qoutes, ({paramName: 'some string'})
I'm a little confused about what you're asking, but the way it sounds is that all the pages use the same controller. If that's the case, just let them. Controllers will eventually be destroyed when they are no longer needed, so instantiating a new one is fine. If you're routing to a new page, it's going to look for the accompanying controller.
--Edit based on OP's comment--
If the goal is to only get data once, you can store that in a service. Every service is a singleton, so if you grab data and save it in your service, you can inject that service elsewhere and have access to it.
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 sending a variable ($stateParams) in the url, to go to another template, I wonder if there is a way to go to the previous template that I visited, obtaining prior to the url and the parameter.
for example i go to the template1 to template2
url of template1: localhost:8100/index/PARAM
url of template2: localhost:8100/index/otherTemplate
if I return to template2 to template1, this URL appear
localhost:8100/index/
i loss the parameter..
they are my states
.state('index', {
cache:false,
url: '/index/:PARAM',
templateUrl: 'templates/index.html',
controller: 'indexAppController'
})
.state('otherTemplate', {
url: '/otherTemplate',
templateUrl: 'templates/template2.html',
controller: 'templateAppController'
})
the parameter is lost when I go back to the previous template. this is my problem
Check whether your parameters are asign as routeparams,
$routeParams.parameter_name="";
Note: Don’t forget to inject $routeParam parameter in controller. Otherwise you wont be able to use it.
sampleApp.controller('indexAppController', function($scope, $routeParams) {
});
Why not add url parameter and value in local storage and use stateprovider for routing... using $state.go('state');
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 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.