A provider based on ui.router which prefetches all templates required by potentially following states.
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.
In order to use template prefetching you have to define valid routes for your application state. This means you provide all the state transitions that are valid for your application. This is done by simple from('A').to('B') calls, where A and B are valid ui.router state names.
So, essentially, ui-router-template-prefetch has a complete state model of your application. In graph theoretical terms, the states from ui.router are the nodes and the from().to() calls represent the directed edges between nodes. The state transitions are defined as follows:
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.
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.