AngularJS ui router parameters

ui-router parameters example
ui-sref params example
ui router url params
ui router url parameter
angularjs ui-router url parameters
$stateparams angularjs
ui-router url parameters
$stateparams angularjs
state params angularjs
angularjs ui-sref parameters
ui router pass parameters to state
angular ui router state parameters

In this video we will discuss how to use url parameters with ui router in angular. Let us understand this with an example.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

At the moment when you click on any student name on the students page, the student details are not displayed as expected.When we click on a student name, we want to pass student id as a URL parameter and on the subsequent page, we want to display all the details of that specific student.

There are 3 steps to use URL parameters with states in angular.

Step 1 - Define a state with URL parameters : To define a URL parameter use url property of the state. In the example below, id is the URL parameter

.state("studentDetails", {
url: "/students/:id",
controller: "studentDetailsController",
controllerAs: "studentDetailsCtrl"
})

Step 2 - Creating links to the state with URL parameters : To create links to the state with URL parameters, use ui-sref attribute on the anchor element. Notice the value of the ui-sref attribute is the name of the state and we are using it like a function. To the function we are passing a JavaScript object, which has a property (id) that matches the name of the state parameter defined in Step 1.

[ul]
[/a]
[/li]
[/ul]

[a href="#/students/1"]Mark[/a]

Please note that angular uses url property value of the state configuration object, to generate the correct href attribute value for the anchor link

Step 3 : Access URL parameters : To access URL parameters, use $stateParams service. Notice the parameter name is used as a property on the $stateParams service.

.controller("studentDetailsController", function ($http, $stateParams) {
var vm = this;

$http({
method: "get",
}).then(function (response) {
})
})

[h4][a ui-sref="students"]Back to Students list[/a][/h4]

Test the application. With all these changes if you click on a student name, the respective student id should be passed in the URL and on the subsequent page we should see that specific student details.

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

[EnisOzt]

It made me understand how stateprovider works with query parameters. Thank you so much sir

[geetavideos]

Thanks a lot Venkat! I was stuck at how to pass the variable value if it is grabbed from another variable.. You resolved it clearly! Thanks!

[antoniometal]

Muchas gracias!! me has resuelto la vida. Excelente tutorial, el mejor!!!

[joshuapsmith]

Great explanation of params with ui-router! Thank you!

[persistencej]

Your Tutorials are so helpful to the beginners ... Thanks a lot Venkat!

[seweryngrynfelder]

Thank you very much for this tutorial!!!
You helped me out a lot.

best regards!

[samrudaanand]

can you please explain how to retain a state while we go to another. For example, if I want the sidebar content to also be injected as view on some action, and on click of some link in navbar, inject the main content, then I have to retain the content of the sidebar. So could you please explain how this can be achieved?

[NitinSinghx]

Please add some videos for nested routes in ui-route

[martinbenavides]

Great video tutorial!!! Quick question, how do I go about setting up an url that contains the students' name. Instead of having "students/1" in the url, I would like to have "students/Mark". So I should be able to click the student's name and it should take to its page. Your help will be appreciated!!

[dosovibustayes]

angular v2 will be out soon and its build from scratch.. is it ok to learn v1?

[rareware]

Nice tutorial! I just have a problem, in retrieve data part in (studentDetail.asmx), r u there?

[redsnakeintown]

I would like to hide a link in a dropdown of a navbar based on the loggedin user. how can this be done

[ceruttigino]

Fore some reason ui_sref in student.html works in ie but not in chrome. in developer tools I don't see the href generated dynamically by angular, which I see in ie

[PraveenTata]

This doesn't work in Chrome but works on IE.
But ui-sref doesn't work on IE. :(

[TheKamieniu]

How to change params from ex. ?id=34zids to just string '34zids'?

[josephregallis]

Internet Explorer works, Chrome does not work with this program in Windows 10 Pro.

[samyukthasamyu]

hi sir, can u please share this code/zip code.

[MAHOSSAN]

Students details is displaying when i cliked the student name