Redirecting with AngularJS

Ademar Tutor | Oct 23, 2014




I needed a way to redirect to another page inside an AngularJS controller, specifically after successfully submitting a form to the server.

There are lots of ways to do this, one way is to call window.location, however I wanted a more "angular" way of doing it.

Good thing I found out about $location.

What does $location do?

The $location service parses the URL in the browser address bar (based on the window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into $location service and changes to $location are reflected into the browser address bar.

Source: https://docs.angularjs.org/guide/$location

How to implement an AngularJS redirect with $location?

Call $location.path('url/of/target') to any part your angular controller.

Here's an example which redirects to another page after successfully submitting a form:

this.submitPropertyInfo = function() {
  var newProperty = new Property(this.propertyInfo);
  newProperty.$save(newProperty, function(data) {
    if( data.success == true) {
      $location.path("/property/edit/" + data.property_id + "/housing-visit-schedule");
    } else {
      // Notify user for error
    }
  });
};

Be sure to load the $location module in your angular application.

P.S. If you are starting out AngularJS and still unfamiliar how to load $location. Here's how you do it:

angular.module('app', [])
  .controller('createPropertyCtrl', ['$location',
    function($location) {
        // Insert your code here.
    }
]);