0

I am new to Angular JS and try to view student details by passing student id using routing

I have coded a bit but not geeting where to add the details of students and how to pass student id

this is the code for index.html 

<div> <div> <div> <ul> <li><a href="#add"> Add Student </a></li> <li><a href="#show"> Show Student </a></li> </ul> </div> <div > <div ng-view></div> </div> </div> </div> 

this is the code for app.js ``````````````````````````````````````````` var myApp = angular.module('stuApp', []); myApp.config(['$routeProvider', function ($routeProvider) { $routeProvider. when('/add', { templateUrl: 'add_student.html', controller: 'addCtrl' }). when('/show', { templateUrl: 'show_student.html', controller: 'showCtrl' }). otherwise({ redirectTo: '/add' }); }]); myApp.controller('addCtrl', function ($scope) { $scope.message = 'This is Add new Student screen'; }); myApp.controller('showCtrl', function ($scope) { $scope.message = 'This is Show Student screen'; }) 

I want to add student details in via form but dont dont know how to add those values in controller

add_student.html ```````````````````````````` <script type="text/ng-template" id="add_student.html"> <h2>Add New Student</h2> {{ message }} </script> 

show_student.html

<script type="text/ng-template" id="show_student.html"> <h2>Show Order</h2> {{ message }} </script> I want the output as to pass object in controller display the students name and by clicking on the name student details should be displayed. 

2 Answers 2

0

Hi Akansha for pass the parameters through routing in the url you need to change your $routeProvider in something like that:

when('/add/:StudentId', { templateUrl: 'add_student.html', controller: 'addCtrl' }) 

This means that if your url is /add/1837 the parameter StudentId would have the value 1837.

For get the value of StudenId in your controller you can use $routeParams.
So for example your controller could be like the following one:

 myApp.controller('showCtrl', function ($scope, $routeParams) { $scope.message = 'This is Show Student screen'; var studentId = $routeParams.StudentId; }) 

You can obtain more information from the following link URL-Routing - GitHub
Also there are other ways of access the url parameters, they are described in the following SO questions Access URL parameters in Angularjs in the Controller and How to get the url parameters using AngularJS

Sign up to request clarification or add additional context in comments.

Comments

0

In Your app.js route config code, add route param ID like below

 when('/show/:id', { templateUrl: 'show_student.html', controller: 'showCtrl' }) 

In your index.html, pass ID through a tag

 <ul> <li><a href="#add"> Add Student </a></li> <li><a href="#show/{{id}}"> Show Student </a></li> </ul> 

And in show controller, inject $routeParams first,

myApp.controller('showCtrl', function ($scope,$routeParams) { $scope.studentID = $routeParams.id; //passsed ID $scope.message = 'This is Show Student screen'; }) //you can use student ID to filter your data in showStudent.html 

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.