I am developing a single page angular app.

The app takes a token off the URL, then passes it off to an API. Currently my URL looks like this:


My code is already properly using angular routes, but I have to get the token off the URL like this:

var postToken = $location.search().token;

I have this on config:

 app.config(function($locationProvider, $httpProvider, $routeProvider) {
    .when('/token/:token', {
        templateUrl : 'views/select-token.html',
        controller : 'selectHold'
    .when('/purchase-hold/token/:token', {
        templateUrl : 'views/purchase-token.html',
        controller : 'purchaseHold'

I want my URL to be able to look like this:


What do I need to code to be able to search for a /token/ and grab the data next to it, as opposed to ?token= ?

2 Answers

Narek Mamikonyan On

you can inject $routeParams in your controller and it will be available in that

app.controller('selectToken', function($scope, $routeParams) {
     // We now have access to the $routeParams here

then Angular will populate the $routeParams with the key of :token, and the value of key will be populated with the value of the loaded URL.

If the browser loads the URL www.example.com/token/3d2b9bc55a85b641ce867edaac8a979173d4446525230290fc86a0ed8ff18b95 ,

then the $routeParams object will look like:

{ token: '3d2b9bc55a85b641ce867edaac8a979173d4446525230290fc86a0ed8ff18b95' }
Lord Herky On

Build your route like you currently are

.when('/token/:token', {templateUrl : 'views/select-token.html', controller : 'selectToken' })

Then in your controller inject in $routeParams and you will be able to access your route parameter

.controller('selectToken', function($scope, $routeParams){
  $scope.token = $routeParams.token