How to work with ui.router's $stateChangeStart in angularjs?

Question

In my angularjs mobile app, I need the certain requirements. Initially, the app is in the home page. If the user needs to go to the next page in that app, he has to click on that certain content. And it will redirect them to the next page of that particular content. After that, If he wants to go to the previous(back) page, he has to click on the back button.

What I need is, when user is going back to the previous page where he was in, that page is reloading. Instead of reloading that previous page, he should be taken to the same place where he was before. So, how to disable the reload. And I think it can be achieved using 'ui.router' and its $stateChangeStart. For url routing I use '$routeProvider'. So how to achieve this one? Please help me out.

For homepage the url is -

'/myapp/landingpage'

For the next page (when he clicks on the particular content) the url is -

'myapp/content/:contentId'

Answer 1

If you home page is a plain static page - then nothing is required - the template for the home page is already cached in the $templateCache.

Else if your home page has some data that is fetched from some service, I would suggest you to cache the data in your angularjs service layer itself.

You can explore $cacheFactory for more details.

If you do not want to use $cacheFactory directly, you can simply use 'cahce:true' property in yout $http.get request :-

$http.get(url, { cache: true}).success(...);

From the $http docs:-

cache – {boolean|Cache} – If true, a default $http cache will be used to cache the GET request, otherwise if a cache instance built with $cacheFactory, this cache will be used for caching.

The idea is not to mess up view/states for caching and move that responsibility to your service layer.