How to pass URL params in angular $http

Question

I'm converting a server side CRUD app to Angular.js and have a small problem.

I'm getting my data with $http and display all the data via ng-repeat. I want to make users able to click and a specific item and redirect them to the resource.

So how can I pass a URL param to the $http get call dynamically?

Here's how I built the link to the resource (car.id = 3)

<a ng-href="/#/cars/{{car.id}}">Edit</a>

The link should go to http://local.dev/#/cars/3

So how do I bind the dynamic url in my controller?

Here's a stripped down version of my controller

App.controller('CarIndexCtrl', ['$scope', '$http', '$location', function ($scope, $http, $location) {

   $scope.car = {};

   $http({
     method: 'GET',
     url:  $location.$$url,
   })
   .success(function (data, status, headers, config) {
     $scope.car = data;
   })
   .error(function (data, status, headers, config) {
     // error
   });

}]);

So I'm interested to bind the URL the angular way. The above solution works, but feels very much like a hack. I'm not that familiar with Angular, so I like to stick to the defaults for now. I might consider restangular or ng-resource at a later time though...

Maxim Shoustin · Accepted Answer · 2013-10-15 11:30:26Z

2

the above solution works, but feels very much like a hack.

I don't think its hack or something messy.

I would generate URL list in controller (from my view its better for code maintenance) without appending in HTML. Something like:

 $scope.urlList = [];

    $http({
     method: 'GET',
     url:  $location.$url,
   })
   .success(function (data, status, headers, config) {
     $scope.car = data;
     $scope.urlList.push("/#/cars/" + data.id);
   })
   .error(function (data, status, headers, config) {
     // error
   });

After in HTML:

<li ng-repeat="url in urlList" repeat-done="layoutDone()" ng-cloak>
    <a ng-href="{{url}}">Edit</a>
</li>

BTW, I suggest you to use some loader because URL links we generate from promise (aka async) therefore with delay.

Demo Fiddle

answered Oct 15, 2013 at 11:30

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

Comments

BKM · Accepted Answer · 2013-10-15 11:50:19Z

1

In your app.js do something like this

 var app = angular.module('YourAPP');
        app.config(function ($routeProvider) {
            $routeProvider
                .when('/cars/:CarID', {
                    templateUrl: 'app/views/cars.html',
                    controller: 'CarIndexCtrl'
                });
    });

And in your controller

    App.controller('CarIndexCtrl', ['$scope', '$http', '$location', '$routeParams', function ($scope, $http, $location, $routeParams) {

       $scope.car = {};
        $scope.carid = $routeParams.CarID;
       $http({
         method: 'GET',
         url:  $location.$$url,
       })
       .success(function (data, status, headers, config) {
         $scope.car = data;
       })
       .error(function (data, status, headers, config) {
         // error
       });

}]);

And use the carid in wherever in your controller. Hope it helps.

answered Oct 15, 2013 at 11:50

BKM

7,0797 gold badges32 silver badges47 bronze badges

1 Comment

pat Over a year ago

Thank you I will try your suggestion! So the url: $location.$$url, method is something that is used normally. I somehow thought there was a alternative method for binding the url.

Collectives™ on Stack Overflow

How to pass URL params in angular $http

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related