Template Prefetch
A provider based on ui.router which prefetches all templates required by potentially following states.
Motivation
Using UI-Router you are encouraged to divide your application markup in small junks. This can result in quite a view files making up a single page. Those files obviously have to be fetched from the server which can lead to flickering during the rendering process. Of course you can help yourself by prefilling the template cache, but this usually means loading a single javascript file containing the markup for your whole application. In other words have to load markup you may not even need. This can cause rather long loading times which is definitely not what you want, especially on mobile devices.
Wouldn't it be cool to just load the markup you will need for the pages a user can view next? ui-router-template-prefetch lets you achieve this.
By defining which state B can follow a state A, ui-router-template-prefetch is able to load all markup that is needed to render state B while the user is still in state A. If state B is activated the markup is already there and the rendering will be smooth and quick.
Install
bower install --save ui-router-template-prefetch
or
npm install --save template-prefetch ## Documentation In order to use template prefetching you have to define valid routes
As you can see, multiple to() calls can be chained to a from() call. For API clarity it is not possible to chain a from() call to an to() call.
Query parameters syntax
At times you want to provide the template of a state not just as a static url but create it dynamically using a function. ui-router accepts functions as templateUrl property which gets a stateParams object as argument.
{ return 'views/flow-step' + $stateParamsi + '.html';}
In order to prefetch such templates you have to configure your from/to states with the query parameters the function needs to determine the url. There a two ways to achieve this:
TemplatePrefetch will call your templateUrl function and pass in the stateParams you configured in your routes. It will not pass in any other stateParams because it can not predict the future :).
It is important not note that stateParams are only necessary if they determine the actual template. Leave them out if stateParams are only used in your controllers as otherwise the prefetching will not work properly.
This is all you have to do. From now on ui-router-template-prefetch will fetch all templates and ng-includes for all to-states of a given from-state.