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.
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.
AngularJS cannot use the DustJS templates on the front-end. You will need to re-write the templates for AngularJS.
Having Said that, If you are set on AngularJS: you could check out Angular-for-server, but it will still require re-writing DustJS templates.
If you are still considering Frameworks: Check out ReactJS
ReactJS allows for re-using templates both on the client and server. Also, it takes over the template on the front-end as well (for data-binding and event management). This is SEO friendly as it renders the first page on the Server itself.
If you are set on DustJS templates:
I am currently using Dustjs for development. One of the biggest hurdles I am facing is setting up SPA on the frontend. All the event management, routing and data-binding has to be done by the dev, once the page renders on the front-end for the first time. This gives me the advantage of using the same template on the client as well as server and also is SEO friendly due to first page rendering on the server itself.
Hope this helps.
I agree with others. I had similar problem with Handlebars. But migrating it to angular was easy. Benefits of this we're great. AngularJs has many usefull directives secondly-it corresponds with controller.
If you would like to use it anyway... Directives, controllers have template prop, you can insets template code there. But it must be angular friendly:) worked with handlebars for me. But after a while I decided to remove it.
...or you can just compile the curly brackets for the Angular templates, something like:
{~lb}{~lb} slide.text{~rb}{~rb}
Issue in the repo of Krakenjs where the solution is commented. Section in Dust.js tutorial
Hope it helps!
Simplest solution possible to this issue. Simply ensure you leave a space after the first double braces and dust will ignore and angular will pick it up.
{{variable + func() + 'etc'}} // Dust will process to {}
{{ variable + func() + 'etc'}} // Angular will process
