I have a state with url parameter.
Something like:
.state('MyState', {
url: '/contacts/{personName}',
templateUrl: '/app/templates/contacts.html',
controller: 'ContactsController',
params: {
personName: null
}
})
now, I want to use the $state.go syntax and to be able to pass the personName param to the url with the parameter.
So for example, if I call:
$state.go('MyState', {personName: 'john'});
The address bar will show: http://localhost:8080/#!/contacts/john
Right now the address bar is showing http://localhost:8080/#!/contacts/ and I don't know how to force the url to contain the personName. Other than that it works fine.
Just add your parameters with a default value on your state definition. Your state can still have an Url value.
$stateProvider.state('MyState', {
url : '/url',
templateUrl : "/app/templates/contacts.html",
controller : 'ContactsController',
params: {personName: 'defaultName'}
});
and add the param to $state.go() and navigate
$state.go('MyState',{personName: "MIT"});
Refer this:$state.go() with Parameter
Hope it helps..!
In your state definition, when you define "params" you don't have to add param in the url so replace :
url: '/contacts/{personName}',
with
url: '/contacts',
While defining state use the following syntax
.state('myState', {
url: '/contacts/:personName',
templateUrl: '/app/templates/contacts.html',
controller: 'ContactsController',
params: {
personName: {
array: false
}
}
})
Note: "Person Name be visible in url"
Ref: https://ui-router.github.io/ng1/tutorial/helloworld
Related
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
I have a state defined as such:
.state('dashboard.poor-calls', {
url: '/voice-quality/{callType}/{categoryTypeId}/{:categoryEntityId}/?{:tableView}',
template: '<poor-calls></poor-calls>',
reloadOnSearch: false
})
Notice that categoryEntityId is optional.
Is there a way to specify a default value for categoryEntityId if it's not provided in the state() definition, or does the controller of my <poor-calls> directive have to check for a missing categoryEntityId and assume the default value?
Yes, we can use params : {} configuration property:
.state('dashboard.poor-calls', {
url: '/voice-quality/{callType}/{categoryTypeId}/{:categoryEntityId}/?{:tableView}',
params: {categoryEntityId: 1}
template: '<poor-calls></poor-calls>',
reloadOnSearch: false
})
and we can even set what to do if that default value is provided, for example skip it from url (the squash setting):
params: {
categoryEntityId: {
value: 1,
squash: false,
},
},
See all the details here:
Angular ui router passing data between states without URL
How to pass parameters using ui-sref in ui-router to controller
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']
...
}
I have a request to add in another URL parameter that directs to a state that I already have set up. For efficiency purposes, I'm trying to see if I can add multiple URLs to point to the same state, or should I just use the $UrlRouterProvider.when() method to re-direct to that state in this new case.
Ex. this is what already exists
.state('site.link1',
{
url: '/link1',
templateUrl: '/views/link1.html',
controller: 'link1Ctrl'
})
and the request is to add www.site.com/newlink that points to the link1 page. Is there something like this;
.state('site.link1',
{
url: '/link1, /newlink',
...
Try using the Regex and a parameter in the url. It is not optimal but works.
.state('site.link1',
{
url: '/{path:link1|newlink}',
templateUrl: '/views/link1.html',
controller: 'link1Ctrl'
})
More information on regex in Urls.
To generate links with ui-sref pass the same parameter with the state name as a function
<a ui-sref="site.link1({path:'link1'})" >site link 1</a>
<a ui-sref="site.link1({path:'newlink'})">site new link</a>
You use params:
https://github.com/angular-ui/ui-router/wiki/URL-Routing
.state('site.link',
{
url: '/{link}'
..
}
so when you use the same state like this
$state.go('site.link', {link: 'link1'})
$state.go('site.link', {link: 'link2'})
you can used when() function
.state('site.link1',
{
url: '/link1',
templateUrl: '/views/link1.html',
controller: 'link1Ctrl'
})
then on root config
angular.module('myApp', [...])
.config(function ($urlRouterProvider) {
$urlRouterProvider.when(/newlink/, ['$state','$match', function ($state, $match) {
$state.go('site.link1');
}]);
});
I found this approach to be quite simple and clean: create two equal states, just changing the url property
//Both root and login are the same, but with different url's.
var rootConfig = {
url: '/',
templateUrl:'html/authentication/login.html',
controller: 'authCtrl',
data: {
requireLogin: false
}
}
var loginConfig = Object.create(rootConfig)
loginConfig.url = '/login'
$stateProvider
.state('root', rootConfig)
.state('login', loginConfig)
I had almost the same problem, only with another constraint - I didn't want to use a redirect, since I wanted the url in the browser to stay the same, but display the same state.
This was because I wanted the chrome saved passwords to work for users that already saved the previous url.
In my case I wanted these two urls :
/gilly and
/new/gilly
to both point to the same state.
I solved this by having one state defined for /gilly, and for the second url, I defined an abstract state called /new.
This should be set up like this :
$stateProvider.state('new', {
abstract: true,
url: '/new'
template: '',
controller: function() { }
}).state('gilly', {
url: '/gilly',
template: 'gilly.html',
controller: 'GillyController'
}).state('new.gilly', {
url: '/gilly', // don't add the '/new' prefix here!
template: 'gilly.html',
controller: 'GillyController'
});