Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to pass param in routeProvider in Angular JS?

Tags:

angularjs

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
like image 568
Hamed Avatar asked May 02 '15 14:05

Hamed


1 Answers

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.

like image 181
Andrés Rondán Mulero Avatar answered Oct 09 '22 02:10

Andrés Rondán Mulero