AngularJS - Best way to update $route parameter

Question

AngularJS - Best way to update $route parameter

I have several routes that are different, but contain similar parameters.
Example:

when '/user/:accountId/charts/:chartType', controller:ChartsController
when '/manager/:accountId/charts/:chartType', controller:ChartsController
when '/whatever/pathy/paththingy/charts/:chartType', controller:ChartsController

Notice all three views use the same Charts Controller to control the view. Its a fairly generic controller but it needs toggle between available chartTypes... while keeping the rest of the route.
Example: (THIS DOESN'T WORK)

if my currrent url is '/user/001/charts/comparison'
Then I call something like:
$route.current.params.chartType = 'newChart';
$route.reload(); // or soemthing similar?
I want the url to become '/user/001/charts/newChart'

Does anyone have any idea how to easily update parameters of a route without completely re-typeing or rebuilding the route path?

location
angularjs
routes

Answer 1

If it's possible, I would recommend you to use ui-router instead. It's more powerful than ngRoute in many aspects.

Essentially, this module has a higher level concept called state wrapping the underlying route which shields you from working directly with lower route level like route urls.

For a comparison: Difference between angular-route and angular-ui-router

With ui-router, you can implement your code like this:

$stateProvider
  .state('user.chart', {
     url: '/user/:accountId/charts/:chartType',   
     controller: "ChartsController"   
  })
 .state('manager.chart', {
     url: '/manager/:accountId/charts/:chartType', 
     controller: "ChartsController"
  })
 .state('pathy.chart', {
     url: '/whatever/pathy/paththingy/charts/:chartType', 
     controller: "ChartsController"
  })

And you could just use this code to navigate between states:

$state.go('user.chart',{chartType:'newChart'},{inherit:true});

Documentation

Answer 2

The lack of this simple feature annoyed me, so I Implemented it and filed a PR on GitHub

Answer 3

Since angular 1.3 you can use $route.updateParams(newParams) to change route params.

Here is a quote from the angular docs...

$route.updateParams(newParams);

Causes $route service to update the current URL, replacing current route parameters with those specified in newParams. Provided property names that match the route's path segment definitions will be interpolated into the location's path, while remaining properties will be treated as query params.

Answer 4

Well, the following doesn't update the URL based on the position of route parameters, but if you just need to change the last part of the current URL/path and then go there, you could try this:

var newPath = location.path().replace(/\/[^\/]+$/, '/newChart');
location.path(newPath);

Answer 5

Read the angular docs on $location.search()

Considering your url is a get request, and has some parameters

You can get the parameters in your url using this method

/user/001/charts/?chartType=comparison

var searchObject = $location.search();
// => { chartType : 'comparison' }

Now change the value of chartType

$location.search('chartType', 'newChart');

This will change the parameter in your url to

/user/001/charts/?chartType=newChart