How to change the url when swapping through a UI router?

Question

I have an Angular JS project using Angular UI-Router that is going fine, but I am trying to implement the pagination UI Bootstrap directive and cannot develop the right strategy.

I have a data table shown 1 page at a time, and I have a pagination directive showing the correct number of page links. When you click on the link, it gets a new page number and calls a relay call api to get new records and binds them to the table.

Everything works well, but obviously, when you view the data, the URL does not change, so the user cannot use the browser / forward buttons to navigate his story. Ideally, I would like to use the following URLs:

/contacts /contacts/page-2 /contacts/page-3 

I would also like to enable sorting by URL, but this is another question.

I could achieve this, but by manually moving to a new state when one of the pagination buttons is pressed, it will restart the controller and all its contents by making additional ajax calls to the server and making ugly flashes un- when it recreated the pagination control to pages etc.

Ideally, I could change the URL and add the state of the story, but without triggering the actual state change and rebooting / starting the controller for this view. I'm not sure if this is possible, not to mention how to do it.

Does anyone have any idea?

Answer 1

It is easily achievable with $ stateParams

for example

 $stateProvider .state('contacts',{ url: '/contacts', templateUrl: 'contacts.html' }).state('contacts.paginated', { url: "/contacts/page-:pageNum", templateUrl: 'contacts.html', controller: function ($stateParams) { // If we got here from a url of /contacts/page-2 expect($stateParams).toBe({pageNum: 2}); } }) 

Would I choose a different pagination scheme Either / contacts / page / 1 or / contacts? Page = 1 both are easily reachable with ui-router