如何在AngularJS中通过路由URL传递参数

Question

我们如何在AngularJs中向局部视图传递参数。我是Angular的新手，正在学习这些教程。这个教程讲解了基础知识，但没有提到如何向局部视图发送参数。 例如/addStudent?id=45。

 $routeProvider.
                   when('/addStudent', {
                      templateUrl: 'addStudent.htm',
                      controller: 'AddStudentController'
                   }).
                   when('/viewStudents', {
                      templateUrl: 'viewStudents.htm',
                      controller: 'ViewStudentsController'
                   })

- Muhammad Nasir

Answer 1

您可以在地址定义中定义参数，并通过$stateParams控制器参数来访问它。

  when(url: '/new/:portfolioId',
    templateUrl: 'new.html',
    controller: function($scope, $stateParams) {
      $scope.portfolioId = $stateParams.portfolioId;
    }
  )

请看这里：http://benfoster.io/blog/ui-router-optional-parameters，该网页是关于UI Router可选参数的技术内容。

- suvroc

Answer 2

更符合"Angular方式"的实现方法是使用$routeParams服务。

查看文档。

- U r s u s

Answer 3

$routeProvider.when('/addStudent/:id', {
                 templateUrl: 'addStudent.htm',
                 controller: 'AddStudentController'
                   })

$routeProvider.when('/viewStudents/:id', {
                 templateUrl: 'viewStudents.htm',
                 controller: 'ViewStudentsController'
                   })

- Salih Mohamed

---

请解释为什么这是正确的答案，否则将被删除。 - Mamta D

when() 调用中的 URL 现在定义了一个参数。它是从冒号 (:) 开始的部分。AngularJS 现在将从 URL（路由路径）中提取 #/route1/ 后面的任何内容。 - Salih Mohamed

仅提供代码的答案虽然被允许，但通常不会得到太多赞。尝试解释为什么代码有效以及它解决了哪些问题和如何解决。我不同意Mamta关于删除它的观点，但它并不像一个有良好文档记录的答案那样有用。这只是我的个人看法。 - Mike

Answer 4

要在路由中传递参数，您可以在URL中将参数定义为:parameter。

例如：

$routeProvider.
               when('/addStudent', {
                  templateUrl: 'addStudent.htm',
                  controller: 'AddStudentController'
               }).
               when('/viewStudents', {
                  templateUrl: 'viewStudents.htm',
                  controller: 'ViewStudentsController'
               }).
               when('/students/:id', {
                  templateUrl: 'studentsDetail.htm',
                  controller: 'studentsDetailController'
               })

这里的URL是students/:id，其中id是一个参数。

这里有Angular文档

- gaurav bhavsar