AngularJS directive to load both JSON data from remote endpoint and template asynchronously to a page.
See example for some sample usage or try a live demo.
Simply attach JS file to your page and add 'asyncTemplateModule' module as a dependency ...
var app = angular.module('yourModuleName', ['asyncTemplateModule']);... and use it in your templates
<async-template endpoint="/api/some_endpoint" template="templates/template.html" />Directive parameters
- endpoint - JSON endpoint (API) URL. REQUIRED.
- template - template URL (should be local, directive uses HTTP GET only to load template). REQUIRED.
- error-template - template which is loaded when loading data from endpoint fails.
- jsonp - boolean switch whether use JSONP method instead of simple HTTP GET.
- is-array - boolean switch whether data returned by endpoint should be parsed as array.
- reload-interval - load data periodically in some interval in miliseconds.
- observe - observe only manually defined list of directive attributes. Directive observes all attributes by default.
Simply loads JSON data from endpoint using HTTP GET method, loads template and compiles it with data
<async-template endpoint="/api/some_endpoint" template="templates/template.html" />Simply loads JSON data from endpoint using JSONP method, loads template and compiles it with data
<async-template endpoint="/api/some_endpoint" template="templates/template.html" jsonp="true" error-template="templates/404.html" /><async-template endpoint="/api/user/:userId/info" template="templates/template.html" userId="1" />Loads data from endpoint, user ID is taken from app scope - method getUserId(). Directive observes this parameter, so when it's value changes, it reloads appropriate data.
<async-template endpoint="/api/user/:userId/info" template="templates/template.html" user-id="{{getUserId()}}" /><async-template endpoint="/api/user/:userId/info" template="templates/template.html" user-id="{{getUserId()}}" reload-interval="1000" />