Handle URL parameters with AngularJS

AngularJS provides several ways to use URL parameters in order to serve different views to a user or hand over information by using the URL. In this tutorial I will explain the different options you can use, e.g. for a URL like /path/:param/with/query?foo=bar.

Important to know:

a) Angular’s URL Handling

By default Angular uses the # (hash) to switch between different views. For example:

• some-domain.com/index.html#/about -> Shows the view which is mapped to “/about”

• some-domain.com/index.html#/contact -> Shows the view which is mapped to “/contact”

Another way is to use the HTML Push State feature. This adds another entry to a browser’s history which is similar to calling window.location = "#foo"; in JavaScript.

b) Important AngularJS Modules

$routeProvider:

Goal: used to define the location of a view, e.g. maps “/about” to “views/about.html”

Angular Documentation: $routeProvider

$routeParams:

Goal: used to retrieve path and query parameters, e.g. retrieve id parameter of “/user/:id”

Angular Documentation: $routeParams

$locationProvider:

Goal: used to set properties for handling different URL paths, e.g. set HTML5 mode for using push state

Angular Documentation: $locationProvider

$location:

Goal: used to retrieve information from URL or manipulate it, e.g. change URL to “/another/view” in order to change to another view

Angular Documentation: $location

Usage in AngularJS:

1.) Path Parameters

In order to provide a more flexible application, you should use path parameters. A use case might be to save a specific user based on its id. Path parameters are defined as /:param within AngularJS. Examples:

• /user/save/:id -> id is a required parameter

• /user/save/:id? -> id is an optional parameter

• /user/save/:id* -> id can occur multiple times

Now you might wonder how these are implemented in Angular? Here is an example:

// in order to make this code work, you have to add ng-controller="ExampleCtrl" to a view or add controller:'ExampleCtrl' after templateUrl 

angular.module('example', ['ngRoute'])
  // register the route for the view save\_user.html
  .config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/user/save/:userId', {
      templateUrl: 'save\_user.html'
    });
  }])

  // now register the controller
  .controller('ExampleCtrl', ['$routeParams', '$location',
    function ($routeParams, $location) {
      
      // e.g. read userId parameter by directly accessing $routeParams
      var userId = $routeParams.userId;

     // do sth. with the user id
  }]);

In order to change the route by yourself, you should use $location:

$location.url(...) -> Change the whole route

Example:

URL before: ...#/some/route?my=param
$location.url('/any/route')
URL after: ...#/any/route

$location.path(...) -> Only change the path, but not the URL query parameters

Example:

URL before: ...#/some/route?my=param
$location.path('/any/route')
URL after: ...#/any/route?my=param

2.) Query Parameters

AngularJS also provides a way to manipulate URL query parameters which are appended to an URL after the question mark, e.g. ?foo=bar.

$location.search({...}) -> Only change the query parameters, but not the path

Example:

URL before: ...#/some/route?my=param
$location.search('my', 'another')
URL after: ...#/some/route?my=another

If you want to retrieve these query parameters, you can use $routeParams as well like shown before. But you should consider that path parameters have a higher priority than query parameters, i.e. if parameters have the same name, the path parameter always wins.