AngularJS UI Router Parameters

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,

• Overview Of AngularJS
• Modules And Controller In AngularJS
• Controllers in AngularJS
• AngularJS ng src Directive
• AngularJS ng-Repeat Directive
• Handling Events In AngularJS
• How To Use Two-Way Data Binding In AngularJS
• Filters In AngularJS
• Sorting Data In AngularJS
• Sorting Rows By Table Header In AngularJS
• Creating Custom Filters In AngularJS
• ng-Hide And ng-Show In AngularJS
• ng-init Directive In AngularJS
• Search And MultiSearch In AngularJS
• ngInclude Directive In AngularJS
• $http Service In AngularJS
• Consuming ASP.NET WebService In AngularJS
• AnchorScroll Service In AngularJS
• AngularJS Page Refresh Problems
• RouteParams In AngularJS
• Angular AnchorScroll With Database Part
• AngularJS Routing Using WebService
• AngularJS Controller As Syntax
• AngularJS Nested Scopes And Controllers As Syntax
• AngularJS CaseSensitive And Inline Templates

Introduction

At the moment, we are on the student route 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,

.state("studentDetails",{
                             url:"/students/:id",
                                 templateurl: "templates/studentdetail.html",
                                controller: "studentdetailcontroller as studentdetailctrl"
                             })

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,

<h1>List Of Students
    </h1>

Name : <input tye="text" ng-model="studentsCtrl.name" />
<button ng-click="studentsCtrl.searchStudents()">SearchBy</button>
<ul>
    <li ng-repeat="student in studentsCtrl.students">
        <a ui-sref="studentDetails({{id:student.id}})">
            {{student.name}}
        </a>
    </li>
</ul>
<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,

.controller("StudentDetailController", function ( $http, $stateParams) {
     var vm = this;
      $http({
          url: "StudentService.asmx/GetStudents",
          method:"get",
          params: { id: $stateParams.id },
        })
  .then(function (response) {
      vm.student = response.data;
  })
  })

So our final controller code is,

/// <reference path="angular.min.js" />
/// <reference path="angular-route.min.js" />

var app = angular.module("Demo", ["ui.router"])
                    .config(function ($stateProvider) {
                        //  $routeProvider.caseInsensitiveMatch = true;

                        $stateProvider
                        .state("home", {
                            url: "/home",
                            templateUrl: "Templates/home.html",
                            controller: "homeController as homeCtrl"
                        })

                          .state("courses", {
                              url: "/courses",
                              templateUrl: "Templates/courses.html",
                              controller: "coursesController as coursesCtrl",

                          })

                           .state("students", {
                               url: "/students",
                               templateUrl: "Templates/students.html",
                               controller: "studentsController as studentsCtrl",
                               resolve: {
                                   studentsList: function ($http) {
                                       return $http.get("StudentService.asmx/GetAllStudents")
                      .then(function (response) {
                          return response.data;
                      })
                                   }

                               }
                           })

                                       .state("studentDetails", {
                                           url: "/students/:id",
                                           templateurl: "templates/studentdetail.html",
                                           controller: "studentdetailcontroller as studentdetailctrl"
                                       })

                        //              .when("/studentssearch/:name?", {
                        //                  templateurl: "templates/studentssearch.html",
                        //                  controller: "studentssearchcontroller as studentssearchctrl"
                        //              })
                        //    .otherwise({
                        //        redirectto: "/home"
                        //    })
                        //    $locationprovider.html5mode(true);
                    })

                .controller("homeController", function () {
                    this.message = "Home Page";
                })

                 .controller("coursesController", function () {
                     this.courses = ["c#", "SQL", "Oracle"];
                 })

                .controller("studentsController", function (studentsList, $state, $location) {
                    var vm = this;
                    vm.searchStudents = function () {
                        if (vm.name) {
                            $location.url("/studentsSearch/" + vm.name);
                        }
                        else {
                            $location.url("/studentsSearch/");
                        }

                    }


                    vm.reloadData = function () {
                        $state.reload();
                    }
                    vm.students = studentsList;

                })

     .controller("studentdetailcontroller", function ($http, $stateParams) {
         var vm = this;
         $http({
             url: "StudentService.asmx/GetStudents",
             method: "get",
             params: { id: $stateParams.id }
         })
     .then(function (response) {
         vm.student = response.data;
     })
     })

//.controller("studentsSearchController", function ($http, $routeParams) {
//    var vm = this;

//    if ($routeParams.name) {
//        $http({
//            url: "StudentService.asmx/GetStudentsByName",
//            params: { name: $routeParams.name },

//        })
//.then(function (response) {
//    vm.students = response.data;
//})
//    }
//    else {
//        $http.get("StudentService.asmx/GetAllStudents")
//                 .then(function (response) {
//                     vm.students = response.data;
//                 })
//    }

Now, let's save the changes and reload the code.



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