Clever Geek Handbook

How to pass parameter to routeProvider in Angular JS?

I am using routeProvider in Angular JS:

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

How can I pass the parameter to the controller EditProfileController

and here the Ajax method is called that returns the data. This data should appear in the route template 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 on the page along the path:

http://wd.tk/profile

When I click on the route link, I get the url:

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

Id do:

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

I get an error:

TypeError: Cannot read property 'idProfile' of undefined
+3


source to share


2 answers


First, in the url config, you must put the url parameter:

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

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

Inject $ routeParams object and get parameter using

$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 ajax calls be in 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.

+3


source


You need to change your $ routeProvider to have /profile/:type

instead /profile/personal

, which means you are going to provide a value for :type

which can be accessed by inclin $routeParams

inside the inner 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 missed one of the dependencies $routeParams

in your array annotation.

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


source






More articles:


All Articles