4

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?

mailme365
  • 511
  • 2
  • 9
  • 20

4 Answers4

0

you can use $window.history.back()

maddygoround
  • 2,145
  • 2
  • 20
  • 32
  • this won't resolve the issue, the controller would still be called and page get reloaded when we call history.back(). – mailme365 Sep 09 '15 at 11:48
0

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.

Serguzest
  • 1,287
  • 10
  • 18
  • Thanks for the answer, I'm using ui-router, it has extra feature to support multiple ui-views and nested state. However, I don't think it provide the similar function as IONIC's ion-nav-view, when the state get switched, it will always call into Controller, it doesn't provide function to "cache" the state. – mailme365 Sep 09 '15 at 01:22
  • Oh I understand. Sorry I missed that in your question. True, there is no rendered view caching in ui-router. It recreates dom and controllers from scratch during transition. I actually needed it to. Maybe you should modify your question's title and target it for this particular feature. – Serguzest Sep 09 '15 at 15:46
  • I updated the title, hope it could help to clarify my real question, thanks. – mailme365 Sep 10 '15 at 14:33
0

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?

Jacky Zhang
  • 16
  • 2
  • Thanks a lot for your answer. Seems even the reloadOnSearch doesn't exist yet. see [link](http://stackoverflow.com/questions/19636774/angularjs-reloadonsearch-not-working). I'm convinced to leverage IONIC now since IONIC does provide cached view ability on top of Angular JS. – mailme365 Oct 05 '15 at 01:28
0

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 }
  }
}
mohamad kibaly
  • 15
  • 7