How to validate angular HTML templates

Issue

I try to write mostly valid polyglot (X)HTML 5 in my angular HTML templates. They look something like this:

<div class="some-class">
  <input type="checkbox" data-ng-model="variable" />
  <foo-directive data-ng-if="variable"></foo-directive>
</div>

Sometimes I forget closing a tag properly which breaks some browsers. So I would like to include a validator in my toolchain.

The problem is: I do not know of a validator that can handle this case. XML validators typically require a DTD, HTML validators will complain about the angular directives that are used in the code.

Maybe validator is the wrong word and I really want a linter. The only real thing I want it to do is to check that every opening tag has a matching closing tag. Everything else is a bonus.

Do you know of such a validator?

NOTE: I primarily do search for a command line tool that I can integrate with my automated testing. But a webservice might be helpful, too.

Solution

Since htmlhint is an option, you can use it as described here from command line (of course you will have to npm install it first and make sure your PATH contains node_modules/.bin):

htmlhint test.html

To test for specific options:

htmlhint -r tag-pair,attr-no-duplication test.html

Or if the options are in a configuration file:

htmlhint -c config-file test.html

I use the following options with Angular:

• tag-pair: make sure tags are closed properly
• attr-no-duplication: no duplicate attributes in an element

Answered By - Nikos Paraskevopoulos