Delete HTML helper comments in Angular JS?

Question

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

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

Converts to something like

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

How to stop this? I looked at the source of Angular, and I saw that these “helpers” are generated by the unconditional document.createComment inside almost every directive, so I think there is no way to stop them all at once using the configuration settings on the provider or something like that. But maybe there are some custom Angular assemblies without "helpers"? I believe that I could write a Yeoman / Grunt task to remove / comment on .createComment-s from an Angular source whenever I create a new project. Or maybe you guys know about a violin that already does this? And also this raises my last question: Are these comments somehow important for the normal functioning of Angular? And if I delete them, will it cause some kind of instability in my application? Should I just rewrite CSS and "handle it"?

Answer 1

Comments are critical to how Angular handles certain elements. Removing them is currently not an option. What are your problems with this?

Answer 2

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

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

According to the angular.js docs , it is really useful to do this in the production process and should lead to better performance.

Answer 3

From Angular Doc:

Disabling Debug Data

By default, AngularJS appends the binding information and regions to the DOM nodes and adds CSS classes for data-related items:

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

When the compiler creates a new scope, the scope and CSS Class ng-scope or ng-isolated-scope are bound to the corresponding element. These scope references can be accessed through element.scope () and element.isolateScope ().

Tools like Protractor and Batarang need this information to run, but you can disable this in production to significantly increase productivity with:

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

If you want to debug an application with this information, you must open the debug console in a browser, then call this method directly in this console:

 angular.reloadWithDebugInfo(); 

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

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