Overview

In this article, we will see how to use URL parameters with UI-Router in Angular. To implement this, we will use the same example which we had implemented in our previous articles.

For more articles on AngularJS, refer to these links,

Introduction

At the moment, we are on the student route page.

page

Suppose in the URL, I want to pass the id as students/1 but nothing happens instead a URL is as-

http://localhost:59601/#/students

The application is broken at the moment .So, we will fix that using URL parameters with UI-Router. To use these, we will follow these steps.
The first step is to define the state with URL parameter.

So, our script file code for studentsController is,
  1. .state("studentDetails",{
  2. url:"/students/:id",
  3. templateurl: "templates/studentdetail.html",
  4. controller: "studentdetailcontroller as studentdetailctrl"
  5. })
As we want to navigate that with its respective ids as students/1 and so on , we use .state objects and the URL as well.
The Second step is to link the state with URL parameters. So, in our View i.e. student.html will write the student details and pass the id in that will use a tag and used ui-sref attribute as,
  1. <h1>List Of Students
  2. </h1>
  4. Name : <input tye="text" ng-model="studentsCtrl.name" />
  5. <button ng-click="studentsCtrl.searchStudents()">SearchBy</button>
  6. <ul>
  7. <li ng-repeat="student in studentsCtrl.students">
  8. <a ui-sref="studentDetails({{id:student.id}})">
  9. {{student.name}}
  10. </a>
  11. </li>
  12. </ul>
  13. <button ng-click="studentsCtrl.reloadData()">Reload</button>
Now our final step is to read that specific parameter value from the controller function of the web service method, pass the id value and then retrieve that specific student details.

So in our Students Details is active StudentDetailController which is responsible for that state,
  1. .controller("StudentDetailController", function ( $http, $stateParams) {
  2. var vm = this;
  3. $http({
  4. url: "StudentService.asmx/GetStudents",
  5. method:"get",
  6. params: { id: $stateParams.id },
  7. })
  8. .then(function (response) {
  9. vm.student = response.data;
  10. })
  11. })
So our final controller code is,
  1. /// <reference path="angular.min.js" />
  2. /// <reference path="angular-route.min.js" />
  4. var app = angular.module("Demo", ["ui.router"])
  5. .config(function ($stateProvider) {
  6. // $routeProvider.caseInsensitiveMatch = true;
  8. $stateProvider
  9. .state("home", {
  10. url: "/home",
  11. templateUrl: "Templates/home.html",
  12. controller: "homeController as homeCtrl"
  13. })
  15. .state("courses", {
  16. url: "/courses",
  17. templateUrl: "Templates/courses.html",
  18. controller: "coursesController as coursesCtrl",
  20. })
  22. .state("students", {
  23. url: "/students",
  24. templateUrl: "Templates/students.html",
  25. controller: "studentsController as studentsCtrl",
  26. resolve: {
  27. studentsList: function ($http) {
  28. return $http.get("StudentService.asmx/GetAllStudents")
  29. .then(function (response) {
  30. return response.data;
  31. })
  32. }
  34. }
  35. })
  37. .state("studentDetails", {
  38. url: "/students/:id",
  39. templateurl: "templates/studentdetail.html",
  40. controller: "studentdetailcontroller as studentdetailctrl"
  41. })
  43. // .when("/studentssearch/:name?", {
  44. // templateurl: "templates/studentssearch.html",
  45. // controller: "studentssearchcontroller as studentssearchctrl"
  46. // })
  47. // .otherwise({
  48. // redirectto: "/home"
  49. // })
  50. // $locationprovider.html5mode(true);
  51. })
  53. .controller("homeController", function () {
  54. this.message = "Home Page";
  55. })
  57. .controller("coursesController", function () {
  58. this.courses = ["c#", "SQL", "Oracle"];
  59. })
  61. .controller("studentsController", function (studentsList, $state, $location) {
  62. var vm = this;
  63. vm.searchStudents = function () {
  64. if (vm.name) {
  65. $location.url("/studentsSearch/" + vm.name);
  66. }
  67. else {
  68. $location.url("/studentsSearch/");
  69. }
  71. }
  74. vm.reloadData = function () {
  75. $state.reload();
  76. }
  77. vm.students = studentsList;
  79. })
  81. .controller("studentdetailcontroller", function ($http, $stateParams) {
  82. var vm = this;
  83. $http({
  84. url: "StudentService.asmx/GetStudents",
  85. method: "get",
  86. params: { id: $stateParams.id }
  87. })
  88. .then(function (response) {
  89. vm.student = response.data;
  90. })
  91. })
  93. //.controller("studentsSearchController", function ($http, $routeParams) {
  94. // var vm = this;
  96. // if ($routeParams.name) {
  97. // $http({
  98. // url: "StudentService.asmx/GetStudentsByName",
  99. // params: { name: $routeParams.name },
  101. // })
  102. //.then(function (response) {
  103. // vm.students = response.data;
  104. //})
  105. // }
  106. // else {
  107. // $http.get("StudentService.asmx/GetAllStudents")
  108. // .then(function (response) {
  109. // vm.students = response.data;
  110. // })
  111. // }
Now, let's save the changes and reload the code.

page

As you can see, at the top of the URL, respective id of the student has appeared. This satisfies our condition.

Conclusion - So, this was all about UI-Router parameter in AngularJS. Hope this article was helpful!!