How can I add a comment (for developers, not in output HTML) to an Angular template?

Question

I'm used to the more popular 'mustache' style templates where I can add a comment for my colleagues with:

{# The following code looks a bit odd, but here's why... #} 

These comments obviously don't appear in the output - so users don't see them. How can I do something similar in Angular?

Answer 1

Angular doesn't have template comment support built in. You could, however, create a comment directive to support it, like this.

app.directive('templateComment', function () {     return {         restrict: 'E',         compile: function (tElement, attrs) {             tElement.remove();         }     }; }); 

Markup would then be:

<template-comment>Put your comment here.</template-comment> 

Alternately, you could use standard html comments, and then strip them out of your production code before deployment.

Consider this grunt task, if you'd like to support block comments - https://github.com/philipwalton/grunt-strip-code Specify a start comment and an end comment, and your comment block will be stripped out of the production code, assuming your add this task to your deploy target. Use it as a model for you build process, if you're not using Grunt. ....