What is the recommended way to capture component state in url in angular js

Question

I have a reusable widget that has its own state. In my case, the state consists of the contents of the search bar (2) , one or more selection fields (1) and a tree where the user can select the active element (3) .

I want to implement a locationManager that will do two things:

• set $locationand change the url based on the state of the widget
• read the entered URL and set the widget to the correct state

I wonder if there is any design template specific to angular applications for this problem. My idea is to report the state using events: each time the state of the widget changes, it should throw an event that will be captured by the location manager and the corresponding URL will be set. Is there a better way?

UPD: the question is mostly about AngularJS 1, but angular 2 solutions are also welcome.

Answer 1

You need to use queryParams from the ActivatedRoute service. Update request parameters in browser URL

Make behavior for changing queryParams