Is it possible / sensible to use external templating engine like dust.js or any other with anjularjs?

Question

I had this urge to use dust.js templates as it provides a much better performance for UI rendering by caching the templates.

But in my current project we are using angularjs. It is even possible/sensible to use dust.js or any other templating engine with angular js ??

Even if i use dust.js will I lose the 2-way binding .. ?

Please suggest considering a relatively large SPA.. ?

P.S. I am a novice in both angular and dust.

Riva

AngularJS too caches the templates it uses. I believe in something like $templateCache. – Chondriosome

ya angularjs caches it in $templateCache but as per my understanding its just to prevent the fetching of templates from the server. Does angularjs also provide something like pre-compiled templates ? – Riva

Answer 1

Sounds like a good use case for a filter!

Be aware that dust.js is an asynchronous renderer, but if you've already loaded everything then dust will fire synchronously (most of the time)

app.module('yours',[]).filter('dustRender', function(){
  return function(input, templateName){
    var rendered;
    dust.render(templateName, input, function(err, out){
      if('string' === typeof out){
        rendered = out;
      }
      err && console.error('Dust rendering error!', err);
    });
    return rendered || input;
  };
});

template

<span>{{ modelData | dustRender:'registered-dust-template' }}</span>

Note: Angular $sanitizes output, like html.

Confiture

i dropped the idea of using the 2 together because I was losing the 2-way binding.. anyways +1 for the approach. U really gave me a nice insight into filters. Thanks – Riva