How to pass Parameters in Route Urls in AngularJS

Question

How can we pass parameters to partial view in angularJs. I am new to angular ,I am following These tutorials for learning .This tutorial explain basic quite well but nothing about how can we send parameter to partial view. e.g /addStudent?id=45

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

suvroc · Accepted Answer · 2015-09-02 11:37:51Z

4

You can define parameter in address definition and access it by $stateParams controller parameter

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

Look here: http://benfoster.io/blog/ui-router-optional-parameters

answered Sep 2, 2015 at 11:37

suvroc

3,0621 gold badge17 silver badges29 bronze badges

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

Comments

U r s u s · Accepted Answer · 2015-09-02 11:50:56Z

3

The more "Angular way" to achieve that is by using the $routeParams service.

Check the docs.

edited Sep 2, 2015 at 11:50

answered Sep 2, 2015 at 11:36

U r s u s

7,04812 gold badges54 silver badges88 bronze badges

Comments

gaurav bhavsar · Accepted Answer · 2015-09-02 11:36:00Z

2

to pass parameter in route you can define parameter as :parameter in you url

like :

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

here url students/:id has id as a parameter.

Here is angular doc

answered Sep 2, 2015 at 11:36

gaurav bhavsar

2,0512 gold badges26 silver badges36 bronze badges

Comments

Salih Mohamed · Accepted Answer · 2016-11-04 05:15:18Z

2

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

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

edited Nov 4, 2016 at 5:15

answered Nov 2, 2016 at 12:41

Salih Mohamed

1034 silver badges11 bronze badges

3 Comments

Mamta D Over a year ago

Explain why this is a correct answer else it will be deleted.

Salih Mohamed Over a year ago

The URLs in the when() calls now define a parameter. It is the part starting from the colon (:param) AngularJS will now extract from the URL (route path) whatever comes after the #/route1/ part.

Mike Over a year ago

Code-only answers, while they are permitted, they don't tend to get a whole lot of upvotes. Try explaining why the code works and what problems it addresses and how. I disagree with Mamta about it being deleted, but it's just not as useful as an answer that's well documented. Just my $0.02.

Collectives™ on Stack Overflow

How to pass Parameters in Route Urls in AngularJS

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related