RouteParams In AngularJS

Overview

In this article, we will see how to pass and retrieve parameters from URL in AngularJS. We will be using the same example which we had used in AngularJS routing i.e our Demo Application. In that, we are displaying the list of students with the help of web service and students controller in the URL and after displaying the data from AngularJS Controller, we will add a hyperlink to each of the student record and display various details.



For more articles on AngularJS, refer to

• 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

Introduction

When we run the application, we see the local route i.e our localhost and students.



At the moment, when we click on students' links, we see a local route as student and we are displaying list of students. Here, we will display a hyperlink on each of the students and display various details of each student.

To achieve this, we are going to add a web method to this, which is going to fetch the student details for each student. We will add that webmethod to our webservice.

So, we will create another webservice method called GetStudents and pass a parameter as id.  And, we will pass that parameterized id in our SQL where condition as we are displaying records on the basis of where id=1 and so on. So, our code is for GetStudents web method is:

[WebMethod]
public void GetStudents(int id )
{
    Student student = new Student();
    string cs = ConfigurationManager.ConnectionStrings["Test"].ConnectionString;
    using (SqlConnection con = new SqlConnection(cs))
    {
        SqlCommand cmd = new SqlCommand("select * from students where id=@id", con);

        SqlParameter param = new SqlParameter()
        {
             ParameterName = "@id",
            Value=id
        };
        cmd.Parameters.Add(param);
        con.Open();
        SqlDataReader sdr = cmd.ExecuteReader();
        while (sdr.Read())
        {

            student.id = Convert.ToInt32(sdr["id"]);
            student.name = sdr["Name"].ToString();
            student.gender = sdr["gender"].ToString();
            student.city = sdr["city"].ToString();



        }

    }

    JavaScriptSerializer js = new JavaScriptSerializer();
    Context.Response.Write(js.Serialize(student));
}

As you can notice that we have passed a parameterName as @id and value as id with its respective id mapped to each particular student. We are passing that in JSON serialization context to display them.

Let's quickly run our webservice and see our code. In that, we will see two methods. We will invoke the second one as,



Let's click on the second one, GetStudents. We will invoke that.



Now, it's asking for id. We will enter id one and see that we are getting any JSON output. As we have entered one, we got the desired output.


Now, we will add hyperlinks to our students controller. Let's switch back to our students controller and add hyperlinks to each of the students as,

Just add an anchor tag.

<a href="students/{{student.id}}">

Close the anchor Tag, save the changes, and reload the page. You will see a hyperlink on each of the students.



Now, just right click on any name and copy the address. Paste that in a notepad and you will see a id appeared as
http://localhost:59601/students/1

Here, in this example, I clicked on Akshay where his id is 1.

The next step is to create a controller in our script file.

.when("/students/:id", {
templateUrl: "Templates/StudentDetail.html",
controller: "StudentDetailController"
})

We have written students/:id as it is identified by id and controller name as studentdetailcontroller. We need to create a separate page in templates folder to display details page.

So, let's create a page for StudentDetail.

We need to display id,city, and gender of each student. As it’s a partial template, we don’t need the html tags to remove that. Let's bind those records,

<h1>Student Details</h1>
<table style="border:1px solid black">
    <tr>
        <td>Id</td>
        <td>{{student.id}}</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>{{student.name}}</td>
    </tr>
    <tr>
        <td>City</td>
        <td>{{student.city}}</td>

    </tr>
    <tr>
        <td>Gender</td>
        <td>{{student.gender}}</td>
    </tr>
</table>
<a href="students.html">Back To List </a>

You notice that we are binding those records and you notice we have just written a student object as where these object is coming from. We are doing this in partial template, we will be attaching those in $scope object . Now, we have our partial template ready. The next step is to create a student controller in our script.js file. So, let's create a controller.

.controller("StudentDetailController", function ($scope, $http, $routeParams) {
    $http({
        url: "StudentService.asmx/GetStudents",
        params: { id: $routeParams.id },
        method:"get"
    })
    .then(function (response) {

        $scope.student = response.data;

    })

});

Now, notice that we have written the controller name as studentdetailcontroller and we are injecting $routeparams the URL we had specified which we are fetching from web service method GetStudents. We are specifying the id as we are displaying records on id and here, we had specified $routeparams.id as method is get.

Just save the changes and reload the page. You will see the List of the entries.

When you click on the particular student, notice the URL in the Output as it appends to 1,2 and so on.



Conclusion

So, this was about RouteParams in AngularJS. Hope this article was helpful.