AngularJS ui router parameters

Suggested Videos
Part 41 - AngularJS route resolve
Part 42 - AngularJS ui-router tutorial
Part 43 - AngularJS ui-router configuring states



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



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",

    templateUrl: "Templates/studentDetails.html",

    controller: "studentDetailsController",

    controllerAs: "studentDetailsCtrl"

})

Step 2 - Create 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>

    <li ng-repeat="student in studentsCtrl.students">

        <a ui-sref="studentDetails({id: student.id})">

            {{student.name}}

        </a>

    </li>

</ul>

For example, if we have a value of 1 for student.id and a value of Mark for student.name, the above code will generate an anchor element with href attribute value as

<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({

        url: "StudentService.asmx/GetStudent",

        method: "get",

        params: { id: $stateParams.id }

    }).then(function (response) {

        vm.student = response.data;

    })

})

Finally to link back to list of students page, use ui-sref attribute on studentDetails.html as shown below.

<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.