CODEWITHSUNDEEP
javascriptangularjs
user3089094
user3089094

Reputation: 736

Remove helper HTML comments in Angular JS?

Is there a way to prevent Angular from creating "helper" HTML comments? For example,

<div ng-include="myTemplate"></div>

Will transform into something like

<!-- ngInclude: 'hurr-durr.html' -->
<div ng-include="myTemplate"></div>

How do I stop this? I've looked into the Angular source, and I've seen these "helpers" are generated by an unconditional document.createComment inside almost every directive, so I guess there's no way to stop them all at once by using a config setting on a provider or something. But maybe there is some custom Angular build without "helpers"? I suppose I could write some Yeoman/Grunt task to remove/comment the .createComment-s from Angular's source whenever I scaffold a new project. Or maybe you guys know of a fiddle that already does that? And also, this raises my last question: Are those comments somehow crucial to the Angular's normal functioning? And if I remove them, will it cause some kind of instability in my app? Should a just rewrite the CSS and "deal with it"?

Upvotes: 8

Views: 6076

Answers (3)

Alireza
Alireza

Reputation: 104650

From Angular Doc:

Disabling Debug Data

By default AngularJS attaches information about binding and scopes to DOM nodes, and adds CSS classes to data-bound elements:

As a result of ngBind, ngBindHtml or {{...}} interpolations, binding data and CSS class ng-binding are attached to the corresponding element.

Where the compiler has created a new scope, the scope and either ng-scope or ng-isolated-scope CSS class are attached to the corresponding element. These scope references can then be accessed via element.scope() and element.isolateScope().

Tools like Protractor and Batarang need this information to run, but you can disable this in production for a significant performance boost with:

myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

If you wish to debug an application with this information then you should open up a debug console in the browser then call this method directly in this console:

angular.reloadWithDebugInfo();

The page should reload and the debug information should now be available.

For more see the docs pages on $compileProvider and angular.reloadWithDebugInfo.

Upvotes: 0

Eric
Eric

Reputation: 111

You are able to remove the contents of these angular comments, as well as some of the classes angular attaches to elements (e.g ng-scope) by adding this config to your angular module:

myApp.config(['$compileProvider', function ($compileProvider)
{
    $compileProvider.debugInfoEnabled(false);
}]);

According to the angular.js docs, it is actually good to do this in production and should result in a performance boost.

Upvotes: 2

Jeff Hubbard
Jeff Hubbard

Reputation: 9892

The comments are crucial to how Angular handles certain elements. Removing them is not currently an option. What issues are you having with it?

Upvotes: 5

Related Questions