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.
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'
});
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'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 the following link.
<a ui-sref="...">Clicking this adds ?test=true to the query params.</a>
Is there a way to use the ui-sref attribute to just change query params without reloading the page or directing to another function?
You should be able to do it by passing the arguments with the state.
try:-
<a ui-sref="yourStateName({test:true})">Clicking this adds ?test=true to the query params.</a>
Usage:
ui-sref='stateName' - Navigate to state, no params. 'stateName' can be any valid absolute or relative state, following the same syntax rules as $state.go()
ui-sref='stateName({param: value, param: value})' - Navigate to state, with params.
Just define the names of query params in the state url
$stateProvider.state('posts', {
url: '/posts?test&answer',
views: {
content: {
templateUrl: 'templates/posts/index',
controller: 'PostsController'
},
navbar: {
templateUrl: 'templates/partials/navbar'
}
}
})
And use like this
<a ui-sref="posts({test: true, answer: false})">Next Page</a>
I am using ui-router version 0.2.15
In combination with PSL's answer, to prevent refreshing when setting up the state, just use the property reloadOnSearch: false.
.state('myState', {
url: '/myState?test',
reloadOnSearch : false,
...
})
As long as your queries then take place within this same state.