Я хочу показать данные студента, передавая идентификатор студента через маршрутизацию в angularjs.Но я не могу это сделать

Question

Я новичок в Angular JS и пытаюсь просмотреть сведения об учащемся, передавая идентификатор учащегося с помощью маршрутизации

Я немного кодировал, но не знаю, куда добавить сведения об учащемся и как передать идентификатор учащегося

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';

})

Я хочу добавить данные ученика через форму, но не знаю, как добавить эти значения в контроллер

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.

Answer 1

В коде конфигурации вашего app.js добавьте идентификатор параметра маршрута, как показано ниже

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

В вашем index.html передайте идентификатор через a тег

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

И в контроллере шоу сначала введите $routeParams,

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

Answer 2

Здравствуйте, Akansha, для передачи параметров через маршрутизацию в URL, вам нужно изменить ваш $ routeProvider следующим образом:

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

Это означает, что если ваш URL равен /add/1837, параметр StudentId будет иметь значение 1837.

Для получения значения StudenId в вашем контроллере вы можете использовать $ routeParams.
Так, например, ваш контроллер может быть похож на следующий:

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

Более подробную информацию можно получить по следующей ссылке URL-маршрутизация - GitHub
Также существуют другие способы доступа к параметрам URL, они описаны в следующих SO-вопросах Доступ к параметрам URL в Angularjs в контроллере и Как получить параметры URL с помощью AngularJS