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?
Using reload() method: Angular route service reload() method is used when we want just the current route to be reloaded instead of making our entire application reloading or refreshing.
The $routeParams service allows you to retrieve the current set of route parameters. Requires the ngRoute module to be installed. The route parameters are a combination of $location 's search() and path() . The path parameters are extracted when the $route path is matched.
AngularJS ngRoute module provides routing, deep linking services and directives for angular applications. We have to download angular-route. js script that contains the ngRoute module from AngularJS official website to use the routing feature. You can also use the CDN in your application to include this file.
The $on() method is an event handler, the event which will handle $routeChangeSuccess which gets triggered when route/view change is done.
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 innewParams
. 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.
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: What is the 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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With