Async template directive examples

Simple usage

Use-case: You have a JSON endpoint without any params and want to load data to a template. Endpoint supports CORS, so you can use simple HTTP GET method.

Usage
<async-template endpoint="http://vast-brushlands-3412.herokuapp.com/users" template="templates/users_list.html" />
Result

Binding to scope

Use case: You have 1 method (getUserId) and 1 variable (showTags) in your scope and you want to bind them to two async-template directives at once. First directive loads data using HTTP GET and second using JSONP. Second endpoint serves data after 2 seconds timeout. You don't want to reload data on every showTags change, so you set the "observe" attribute to overwrite list of observed attributes.

First directive usage (HTTP GET)
<async-template endpoint="http://vast-brushlands-3412.herokuapp.com/user/:userId/info" template="templates/user_info.html" show-tags="{{showTags}}" user-id="{{getUserId()}}" observe="userId">loading ...</async-template>
Second directive usage (JSONP)
<async-template jsonp="true" endpoint="http://vast-brushlands-3412.herokuapp.com/user/:userId/tasks" template="templates/user_tasks.html" user-id="{{getUserId()}}" error-template="templates/error-tpl.html">loading ...</async-template>
Result
HTTP GET loading ...
JSONP loading ...

Automatic reload

Use case: You want to load data periodically from endpoint using 2 params binded to current scope.

Usage
<async-template jsonp="true" endpoint="http://vast-brushlands-3412.herokuapp.com/:subject" template="templates/reload.html" subject="{{subject}}" reload-interval="{{interval}}" error-template="templates/error-tpl.html">loading ...</async-template>
Result loading ...