AngularJS - Keep route component in cache (keep-alive)

Question

I need to keep the state of a component A in cache, so that when I navigate from A to B or C and I come back to A it does not get re-render again (it also includes a API call in its constructor, so it's kind of slow). I will like to keep this initial state through out the whole session of the user. In Vuejs https://jsfiddle.net/shidianxia/ckj7xbqq/ they have a very simple way to do this using this syntax:

<keep-alive :include="include">
    <router-view></router-view>
</keep-alive>

I will like to have something similar for AngularJS, notice I say JS so old angular. I have an hybrid application using modern angular but keeping old angularjs router.

I appreciate your help, thank you.

Answer 1

According you your comment I think it would make sense to build it in 2 parts.

Part 1: Keeping the state in a service By keeping the state in a service you would limit the request send to the server and thus saving time.

Part 2 Using $templateCache By using angularjs template cache service you should keep the time for rendering the view with your data to a minimum. You can find infos on how to use that in their docs https://docs.angularjs.org/api/ng/service/$templateCache

If you in the end still have this flicker while rendering you should use ngCloak to prevent showing the uncompiled view ( https://docs.angularjs.org/api/ng/directive/ngCloak )