How to pass param in routeProvider in Angular JS?

Question

I use routeProvider in Angular JS:

.when('/profile/personal', {
       templateUrl: 'personal.html',
       controller: 'EditProfileController'
})

How I can pass param to controller EditProfileController and here call Ajax method that returns data. This data must be display in template of route in personal.html.

Example:

    .controller('EditProfileController', ['$scope', '$http', function ($scope, $http) {
         // If was click on `/profile/personal` from route, must get patam `personal` and call method GetAjax(param);
         $scope.GetAjax = function (param){
            //here return data put it in template HTML from route
         }  

    }]);

My links are located in page by path:

http://wd.tk/profile

When I click to link route I get URL:

http://wd.tk/profile#/profile/personal/1

Id do:

.controller('EditProfileController', ['$scope', '$http', function ($scope, $http, $routeParams) {
   console.log($routeParams);
}]);

I get error:

TypeError: Cannot read property 'idProfile' of undefined

where is this `param` coming from? Is it from the route Url? — New Dev, May 02 '15 at 15:02
If tell otherwise, when I click link from route, I must call AJAX in controller and responded data must be in template from route — Hamed, May 02 '15 at 15:10
You can specify a parameter in the route url with `"/profile/personal/:param"`, and the `param` is available via the injectable `$routeParams`, so, in the controller you can do `$routeParams.param` — New Dev, May 02 '15 at 15:17

score 10 · Accepted Answer · edited May 23 '17 at 11:46

First, in your url configuration, you must put the parameter of url:

when('/profile/personal/:idProfile', {
       templateUrl: 'personal.html',
       controller: 'EditProfileController'
})

Now, in your EditProfileController, you should get the parameter and call to ajax request:

Inject the $routeParams object and get the parameter with

$routeParams.idProfile:

.controller('EditProfileController',  
function ($scope, $http, $routeParams) {

   var idProfile = $routeParams.idProfile;

   $http.get("service url").then(setData, setError);

   function setData(data) {
       $scope.data = data;
   }
   function setError() {
       alert("error on get data profile");
   }

}]);

In your html, you will show your data profile in the correct format.

But I recommend that all the ajax calls should groups in angular services. PD: Check It out angular ui router:

What is the difference between angular-route and angular-ui-router?

hope this helps.

One moment please, what link must be for `/profile/personal/:idProfile` is `Link`? — Hamed, May 02 '15 at 15:40
So, but how to check if was click on `personal` and do request Ajax then. Now your code in controller is run always — Hamed, May 02 '15 at 16:24
Also I get error: TypeError: `Cannot read property 'idProfile' of undefined` — Hamed, May 02 '15 at 16:27

Pankaj Parkar · Answer 2 · 2015-05-02T16:51:14.120

0

You you need to change your $routeProvider, that should have /profile/:type instead of /profile/personal that means you are going to provide value for :type which can be accessible by injectin $routeParams service inside controller.

.when('/profile/:type', {
       templateUrl: 'personal.html',
       controller: 'EditProfileController'
})

Controller

.controller('EditProfileController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
     $scope.profileType = $routeParams.type;
     $scope.GetAjax = function (){
        //here you have profile type in $scope.profileType
        //you can pass it to ajax by simply accessing scope variable.
        $http.get('/getprofiledata?type='+ $scope.profileType)
        .success(function(data){
           $scope.profileData = data;
        })
        .error(function(error){
           console.log('error occured')
        })
     }  
     $scope.GetAjax(); //calling it on controller init
}]);

Update

YOu had missed one of dependency $routeParams in array annotation.

.controller('EditProfileController', ['$scope', '$http', '$routeParams',function ($scope, $http, $routeParams) {
   console.log($routeParams);
}]);

edited May 02 '15 at 16:51

answered May 02 '15 at 15:41

Pankaj Parkar

134,766
23
234
299

How be if I need set `when` like as: `.when('/profile/contacts/', { templateUrl: 'personal.html', controller: 'EditProfileController' })` – Hamed May 02 '15 at 16:30
then you need to add one more when condition like `$routeProvider.when('/profile/:type', { templateUrl: 'personal.html', controller: 'EditProfileController' }).when('/profile/contacts/', { templateUrl: 'personal.html', controller: 'EditProfileController' })` – Pankaj Parkar May 02 '15 at 16:33
Can you see please again my question and edit own answer? Because now are a lot moments – Hamed May 02 '15 at 16:48
It works thabnks, can I check if exists `$routeParams.type = 1`? – Hamed May 02 '15 at 16:59
@Hamed could you do upvote & accept my answer..Thanks :) – Pankaj Parkar May 02 '15 at 17:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/76780/discussion-between-pankajparkar-and-hamed). – Pankaj Parkar May 02 '15 at 19:11

How to pass param in routeProvider in Angular JS?

2 Answers2

Linked