CODEWITHSUNDEEP
angularjsionic-framework
mailme365
mailme365

Reputation: 551

How to cache state (page) during history back in Angular JS like IONIC

IONIC has a very good feature to "cache" the state by using ion-nav-view, when user access the state in history, it will not reload the page -- Controller won't be called, and we could enable the cache globally or by page.

While working on a web site, I tend to use Angular JS directly instead of IONIC since IONIC is mainly for the mobile hybrid APP development. However, I really like the way IONIC handle the "history" and page reload. I know that we could leverage Angular Service to keep page data and achieve the similar function. But I feel it's not convenient to code and we have to put everything into service instead of controller.

Take an example here, we have a pagination search on Page A, by clicking each item to navigate to page B for the detailed item information, if we go back to Page A, we do not want to re-execute the pagination search again. I feel this is a very common requirement for most web site, IONIC's ion-nav-view could achieve this function easily without moving data to service, I wonder is there any angular JS plugins or directive which could help to achieve this function, it's something very similar as what IONIC's ion-nav-view does?

Upvotes: 4

Views: 4270

Answers (4)

mohamad kibaly
mohamad kibaly

Reputation: 15

I also need the same feature and I found this lib: http://christopherthielen.github.io/ui-router-extras/#/sticky

I think It can solve the problem but it make a problem on performance because every opened state still working in background and use memory and cpu. (as I think)

Edit

ui-router added stiky feature please see this link: ui-router/sticky-states

Here how you can use it 1) Add Plugin 

import {StickyStatesPlugin} from "ui-router-sticky-states";

angular.module('myapp', ['ui.router']).config(function($uiRouterProvider) {
  $uiRouterProvider.plugin(StickyStatesPlugin);
});

2) Mark a state as sticky

let adminModule = {
  name: 'admin',
  sticky: true,
  views: {
    admin: { component: AdminComponent }
  }
}

Upvotes: 0

Jacky Zhang
Jacky Zhang

Reputation: 16

I am looking for the answer too, no lucky. One answer is http://www.tivix.com/blog/dont-forget-the-back-button-in-your-single-page-ap

the author mentioned ngRouter's [reloadOnSearch] option, but i doubt this answer.

From ui-router v0.2.5, there's reloadOnSearch option too, but it's not for our purpose.

another answer is http://www.bennadel.com/blog/2801-revisiting-routing-nested-views-and-caching-with-ngroute-in-angularjs-1-x.htm

I think there's no simple way now, you have to keep controller's status, and restore controller's status on popstate event, and reproduce all controller's actions. The other way is cache rendered-html, but how can angular touch the restored-html still?

Upvotes: 0

Serguzest
Serguzest

Reputation: 1307

History is a consequence of navigation. So I think you are actually asking about AngularJS routing which is responsible for navigation and history management features. Angularjs has built-in router but ui-router seems to be more main stream because of its additional capabilities.

Upvotes: 0

maddygoround
maddygoround

Reputation: 2280

you can use $window.history.back()

Upvotes: 0

Related Questions