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.
Related
I need to redirect to another page in angular js.
As , i have used following code to redirect. But is seems that is passing data through URL.
Need to post data to redirection URL.
Searched lot, but didn't find any solution.
Your help is highly appreciated.
$location.path('/refer').search({mobile: mobileNumber});
You can use state params to pass data to another as shown below:
JS:
.state('dashboard',{
url: '/dashboard',
templateUrl: 'views/dashboard.html',
controller: 'dashboardCtrl',
params : { areaName : null, city : null}
})
View:
<a ui-sref="customer.app.dashboard({areaName:area.area_name,city:area.city_id.city_name})">
Hope this helps..
you can use below. for this you need to inject $state
$state.go("refer", {"mobile" : mobileNumber});
I am building a application which has different modules. and two modules can have same pages. So based on url i am making the appropriate ajax call to load data. So I am tring to setup my states in below way:
$stateProvider.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginController as LoginController'
}).state('logout', {
url: '/logout',
templateUrl: '',
controller: 'LogoutController as LogoutController'
}).state('module', {
url: '/:module',
params: {
module: DataService.getCurrentModule()
}
}).state('module.cover', {
url: '/cover',
templateUrl: 'cover.html',
params: {
module: 'leads'
}
}).state('module.leads', {
url: '/leads',
templateUrl: 'leads.html',
controller: 'LeadsController as ctrl',
abstract: true
})
Given that at the time of login I will fetch all modules and save it in DataService, which is happening. Then after login two things will be done. One navigation urls which i have formatted in below way:
<a href={'#/'+ module.code +"/" + (menu.type|| menu)}>
<i className={classes}></i> <span >{menu.name || menu }</span>
</a>
which is setting the correct url, and second in app.js in "run" I am checking if login is done them I am doing :
$location.path(DataService.getCurrentModule() + "/" + (home.type || home) );
which is also happening, but issue is desired controller and html page is not being loaded. Am I missing something here. Or should I have done things little differently?
Thanks for help in advance.
Avoid href when working with ui.router. To navigate to the required states use:
In HTML: ui-sref="myStateName({param1: 1, param2: 2})"
In Javascript inject the service $state and do: $state.go('myStateName', {param1: 1, param2: 2});
In your case, lets assume that there are 2 modules in an array in the $scope:
$scope.myModules = [{code: 'modA'},{code: 'modB'}];
Now in the HTML, to go to the module.cover state you would do:
<a ui-sref="module.cover({module: myModules[0].code})">My Link</a>
If you want to do it for all modules, put it inside an ng-repeat:
<a ng-repeat="mod in modules" ui-sref="module.cover({module: mod.code})">My Link</a>
Also, for state configuration, consider:
ALL STATES NEED A TEMPLATE: even if they are abstract states, they require a template to work properly. If the parent state doesn't have a template, not even one of its childs is gonna show. In this case, the state module doesn't have a template, so it will never work. define a template for it as simple as template: '<div ui-view></div>'
When you define a parameter in the URL, there's no need to define it again in with a params property. That is used only when you need parameters that you don't want to show in the URL
I am using angular ui-router to retrieve a page, but on the documentation, it only shows how to pass in parameters in the url, not the template url.
Is there anyway where it can be passed in the templateUrl?
Below is my code
<div ui-view></div>
<!-- We'll also add some navigation: -->
<a ui-sref="contacts({contactId: 1})">State 1</a>
And the angular config:
myApp.config(function($stateProvider) {
$stateProvider
.state('contacts', {
url: "/states?myParam={contactId}",
templateUrl: "states1.html"
});
});
templateUrl can be a function that takes stateParams parameter:
.state('contacts', {
url: "/states?myParam={contactId}",
templateUrl: function(stateParams) {
return "states" + stateParams.contactId + ".html";
}
})
Why would you want it?
The only reason I can think about is that you want to customize the template on the server-side based on the passed arguments. Which goes against the idea of templates :)
Templates should be generic enough.
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>
How concat dynamic the params using ui-sref?
config state
.config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state('ads', {
url: '/ads?categorie&ubications',
...
});
}
]);
ubications data
$scope.ubications = [{_id : 1, name:'canada'},
{_id:2, name:'usa'},
{_id:3,name:'mexico'}]
in html
<a ng-repeat="ubication in ubications"
ui-sref="ads({ubications: ubication._id})" >
{{ubication.name}}
</a>
when i click on the link url
#!/ads?ubication=1
#!/ads?ubication=2
but would like to know the best form of concatenating the id
eg:
#!/ads?ubication=1,3,4
How I can do this without repeating ids?
link plnkr
http://plnkr.co/edit/erEhSDiGxT1983kz2RsU?p=preview
You could use lodash...
<a ui-sref="ads({ubications: _.uniq(_.pluck(foo, '_id')).join(',') })" >
{{ubication.name}}
</a>
This gets all of the ids, removes duplicates, and joins them into a comma delimited string.