我想通过在angularjs中通过路由传递学生身份来显示学生的详细信息。但我做不到

Question

我对角JS很陌生，并且尝试通过使用路由传递学生id来查看学生的详细信息。

我编写了一些代码，但没有具体说明应该在哪里添加学生的详细信息，以及如何传递学生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'，函数($scope) {

$scope.message = 'This is Add new Student screen';

})；

myApp.controller('showCtrl'，函数($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 

```javascript

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

嗨，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;
 })

您可以从以下链接网址-路由- GitHub获得更多信息

此外，还有其他访问url参数的方法，它们在下面的问题在控制器中访问Angularjs中的URL参数和如何使用AngularJS获取url参数中进行了描述

Answer 2

在app.js路由配置代码中，添加路由param ID，如下所示

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

在您的index.html中，通过a标记传递ID

         <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