Step 2 : Change the HTML in students.html partial template as shown below. Notice student name is now wrapped in an anchor tag. This will display student name as a hyperlink. If you click on a student name with id = 1, then we will be redirected to /students/1

<h1>List of Students</h1>

<ul>

<ling-repeat="student in
students">

<ahref="students/{{student.id}}">

{{student.name}}

</a>

</li>

</ul>

Step 3 : Now let's create an angularjs route with parameters. Add the following route in script.js file. Our next step is to create studentDetails.html partial template and studentDetailsController.

.when("/students/:id",
{

templateUrl: "Templates/studentDetails.html",

controller: "studentDetailsController"

})

With the above change, the code in script.js should now look as shown below. Please pay attention to the code highlighted in yellow.

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

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

var app = angular

.module("Demo", ["ngRoute"])

.config(function ($routeProvider,
$locationProvider) {

$routeProvider

.when("/home", {

templateUrl: "Templates/home.html",

controller: "homeController"

})

.when("/courses", {

templateUrl: "Templates/courses.html",

controller: "coursesController"

})

.when("/students", {

templateUrl: "Templates/students.html",

controller: "studentsController"

})

.when("/students/:id",
{

templateUrl: "Templates/studentDetails.html",

controller: "studentDetailsController"

})

.otherwise({

redirectTo: "/home"

})

$locationProvider.html5Mode(true);

})

.controller("homeController",
function
($scope) {

$scope.message = "Home Page";

})

.controller("coursesController", function ($scope) {

$scope.courses = ["C#", "VB.NET", "ASP.NET", "SQL Server"];

})

.controller("studentsController", function ($scope, $http) {

$http.get("StudentService.asmx/GetAllStudents")

.then(function (response) {

$scope.students =
response.data;

})

})

Step 4 : Right click on Templates folder in solution explorer and add a new HTMLpage. Name it studentDetails.html. Copy and paste the following HTML.

6 comments:

i'm working on a marksheet printing software in which we want to print students marks as graph in efficent and fast way , how could it achieve. my some coliques told me that it would not acheieve through dot net it achieve through JAVA only. pls help me .

I am facing the same issue. Did you find its solution. I am getting error.Error: $http:badreqBad Request Configuration:Http request configuration url must be a string. Received: {"url":"/Service/StudentService.asmx/GetStudent","method":"get","params":{