I need to dynamically construct a link to another route on an angular app using ui-sref with both params and query params. Example:
<a class="clr-secondary" ui-sref="app.topic.individual.conversation.single
({cid:comment.activityItemId, cid:itemId})">{{comment.subject}}</a>
This constructs a link that looks something like
www.website.com/pass/11/conversations/178
I need to also add a query parameter to the end of this so the entire url will look like
www.website.com/pass/11/conversations/178?comment_id=126
Add the query parameters to the url in the ui router config:
.state('yourstate', {
url: '/pass/:activityId/conversations/:conversationId?comment_id',
templateUrl: 'path/to/template',
controller: 'YourController'
});
Then pass the comment_id just like you pass the other params:
<a class="clr-secondary" ui-sref="app.topic.individual.conversation.single
({activityId:comment.activityItemId, conversationId:itemId, comment_id: 126})">{{comment.subject}}</a>
Related
How to create dynamic route when using ui router,
if we define:
$stateProvider.state('page1', {
url: '/page1/:id',
views:{}
}
It works fine,
But if we try to add dynamic id first and then page name then it gives error,
ERROR:
$stateProvider.state('page1', {
url: '/:id/page1',
views:{}
}
How to resolve this issue, can anyone help me into this?
Ok so based on your comment you should use something like this:
$stateProvider
.state('page1', {
url: '/:id/page1'
});
The part above was just fine. But in your link you should use something like this:
<a ui-sref="page1({id: '1234'})">page1</a>
You can also set a variable to the ui-sref like:
<a ui-sref="page1({id: page.id})">page1</a>
I am trying to build a simple app, which goes the following way:
I have 2 menu items in the navbar: home and contact.
The home should be a unique URL only once from the server, at initialisation, read from a QR code (i got this covered, that is no problem to me) and the contact should always be the same.
I got the contact done in the following way:
$stateProvider.state('contact', {
url: '/contact',
templateUrl: 'src/views/contact.html',
controller: 'contactController'
})
The problem is with the home, which should keep the unique URL received by the server. How should i write the state for that one?
.state('home', {
url: '/:uid',
templateUrl: 'src/views/home.html',
})
Also, the home should keep it's unique url generated by the server after refresh and while navigating from contact to home.
In the HTML i would have something like
<a ui-sref="home({uid: --some dynamic uid?--})">Home</a>
this is the part which also requires help.
Set the home state to
.state('home', {
url: /{uid},
templateUrl: 'src/views/home.html',
})
and you could grab the parameters by injecting $stateParams into the controller. $stateParams.uid would return the parameters and store that in local storage or cookies.
Check this link out
https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service
UPDATE:
for example, this is the sample controller that is attached to the home page
app.controller('homeCtrl', function($stateParams) {
var id = $stateParams.uid; //this is how you retrieve the uid
});
by going to your home page e.g. http://www.example.com/abcd12345, the above $stateParams.uid would return abcd12345
Now to set the url. simply use ui-sref instead of href on the <a> tag. ui-router will automatically generate href for you.
e.g.
<a ui-sref="home({uid:'abcd12345'})">Home</a>
You have to create a custom provider and inject it into the config.
eg:- .config($stateProvider, $urlRouterProvider,yourprovider) .
I am not sure about this. But please check this way too..
I currently have a state that looks like this:
.state('test-event-list', {
parent: 'private',
url: '/test-events?search&sortc&sortd&pagesize&page&select&status',
reloadOnSearch: false,
views: {
'view#body': {
templateUrl: 'app/config-test/test-event/list.html',
controller: require('./config-test/test-event/list')
}
},
data: {
auth: true
}
})
I am using $location.search() to set the different parameters such as sorting, list size and list page in the querystring.
So for example, the URL could look like this:
/test-events?pagesize=25&page=1
I have a menu that has the following link to select the tests event list:
<a ui-sref="test-event-list" ui-sref-opts="{reload: true, inherit: false}">Tests</a>
While in the state "test-event-list", clicking this link, does partly what I want: reset the list's parameters and reload the page. But what it's not doing is remove the params from the query string.
How could I go about removing "?pagesize=25&page=1" from the URL?
The inherit flag provided by ui-router doesn't seem to be doing much. I am using the latest version of ui-router (0.2.15).
You could try to go:
<a ui-sref="test-event-list({})" ui-sref-opts="{reload: true, inherit: false}">Tests</a>
because query strings parameters are not mandatory
I had this same issue where I just wanted to remove the query from the end of the URL. I was able to remove the query by passing an empty string for each param. It would look something like this for you.
<a ui-sref="test-event-list({ pagesize: '', page: '' })">Tests</a>
For me is was a little different. I didn't need to pass in the current routes name.
<a ui-sref="{ date: '' }">all logs</a>
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.
I am using AngularUI library and want to extract the query parameters with from a URL
(sample URL: #\books\:categoryID?publisher=xyz (#\books\value?publisher=xyz)).
The $stateParams extracts the data as {categoryId:value?publisher=xyz} but I need to get it as {categoryId:"value", publisher:"xyz"}.
Thanks in advance
Angular ui-router has direct support for passing parameters as a query string params. There is a doc
URL Parameters - Query Parameters
There is a link to an example, using this state definition:
$stateProvider
.state('books', {
url : '/books/:categoryID?publisher',
template: '<div> This is a state def: '+
'<pre>{{toNiceJson(state)}}</pre>' +
' These are params sent to this state:' +
'<pre>{{toNiceJson(params)}}</pre>'+
' </div>',
controller: 'urlParamsCtrl',
})
And these could be links to get to that state
<a href="#/books/value?publisher=xyz">...
<a href="#/books/other?publisher=unknown%20publisher">...
<a ui-sref="books({categoryID:'value', publisher:'xyz'})">...
<a ui-sref="books({categoryID:'other', publisher:'unknown publisher'})">...
See more here
inject $routeParams and use:
$routeParams.categoryID
to get the value.