Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change route parameters without updating view

Tags:

I'm currently trying to figure out how to change the route parameters without reloading the entire page. For example, if I start at

http://www.example.com/#/page

but update a name to be 'George', to change the route to be:

http://www.example.com/#/page/george

If I already had http://www.example.com/#/page/:name routed.

Without reloading the location. Can one just set $routeParams.name = "George" ?

Edit: Alternatively, is there a way to update http://www.example.com/#/page?name=George without reloading or resetting the page?

like image 516
jbenowitz Avatar asked Jul 31 '13 21:07

jbenowitz


People also ask

How do I change the URL in an Angular application without reloading the route?

You could use location.go(url) which will basically change your url, without change in route of application.

What is skipLocationChange?

skipLocationChange: boolean. You can change the route, without changing the URL in the browser. This Navigates to a new URL without pushing a new state into history.

What is Queryparamshandling?

QueryParamsHandlinglinkHow to handle query parameters in a router link. One of: "merge" : Merge new parameters with current parameters. "preserve" : Preserve current parameters. "" : Replace current parameters with new parameters.


1 Answers

Ok, after a lot of searching. I answered my own question.

I've discovered finding anything on the angular documentation is incredibly impossible, but sometimes, once it's found, it changes how you were thinking about your problem.

I began here: http://docs.angularjs.org/api/ng.$location Which took me here: http://docs.angularjs.org/guide/dev_guide.services.$location Which took me to this question: AngularJS Paging with $location.path but no ngView reload

What I ended up doing: I added $location.search({name: 'George'}); To where I wanted to change the name (A $scope.$watch).

However, this will still reload the page, unless you do what is in that bottom StackOverflow link and add a parameter to the object you pass into $routeProvider.when. In my case, it looked like: $routeProvider.when('/page', {controller: 'MyCtrl', templateUrl:'path/to/template', reloadOnSearch:false}).

I hope this saves someone else a headache.

like image 94
jbenowitz Avatar answered Oct 18 '22 03:10

jbenowitz