How to use URL parameters in a GET request with Angular?

Question

I have very simple application that has two features. One, it lists all of the keys two, it is supposed to display one particular key (and the associated value).

Here is the first part that list the keys:

var app = angular.module('flipDaSwitch', ['ngRoute']);

app.controller('ListKeys', function($scope, $http) {

  $scope.getKeys = function() {
    $http.get('/api/keys').
      success(function (data) {
        $scope.buckets = data;
      }).
      error(function (data){
        $scope.buckets = {}
      });
  };

});

I am wondering how could I get a particular key from the API. The current HTML:

<div name="listkeys" class="container">
  <div class="starter-template">
    <div ng-bind-html="message"></div>
    <table class="table table-striped table-bordered table-condensed sortable" ng-init="getKeys()">
      <tr>
        <th>Bucket:</th>
      </tr>
      <tr ng-repeat="bucket in buckets">
        <td>
          <a ng-href="/show_key.html#/key/{{bucket}}">{{bucket}}</a>
        </td>
      </tr>
    </table>
  </div>
</div>

Obviously the show_key.html gets the key in the URL like this:

/show_key.html#/key/efd1ae55a5-random_string

I am not sure how could I issue a get request based on the URL parameters.

Answer 1

Inject $routeParams in controller:

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

Docs

Also there is a bunch of questions about this.