Use dust templates with angular js

Question

I am new to angularjs environment, I want to use angular using dust templates as the current application has dust templates but I could not find anything on how I can use my existing dust templates with angular js.

The problem is dust templates have different syntax while angular js templates use directives provided by it.

So the question is "Is there a way to use my existing dust templates with angular js"? Or I have to rewrite the templates according to angularjs specification.

Answer 1

There is one part that could work in most cases without much rewrite. I'm assuming you're using Dust and Angular defaults, so you'd need to replace the double curly braces with singles:

angular.module('myApp', []).config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{').endSymbol('}');
});

If you had simple use cases, like this in a template:

Hello Himanshu, the time is now {time}.

If you give Angular that file via templateUrl (or load it with gulp-angular-templatecache or whatever), you could do:

angular.module('myApp').directive('myTime', ['$scope', function($scope) {
    $scope.time = new Date();
});

This would render. But you'd have a lot of checking, renaming etc to do.

For more complex use cases, you'd have to do some renaming, search&replace etc. Example, if you had a simple loop, and wanted an ng-repeat in there, you'd have to replace:

<table name="users">
    {#users}
        <tr>
             <td>{name}</td>
        </tr>
    {/users}
</table>

with this:

<table name="users">
    <tr ng-repeat="user in users">
         <td>{user.name}</td>
    </tr>

</table>

Or if you had includes, change:

{>details}

to

<ng-include="details.html">

You can definitely reuse some of the components, but the question is how many and what you'd get. And I'm not sure how would other directives you might bring in react to the single-curly-brace use, they might break so you would probably be better off just search&replacing these too.

Ff course, rename them all to .html, .dust or similar, if they aren't named that.