AngularJS app not passing official W3C HTML5 validation

Question

I have a project where I'm using AngularJS, but one of the requirements is that my app must pass official HTML5 and CSS3 validation.

Why are apps built with AngularJS not passing official W3C HTML5 validation? I really like AngularJS, so what should I do? Do I really have to build it from scratch or is there any reasonable article/blog which address this issue so I can explain it to my professor?

Answer 1

According to some other Stackoverflow QA you can pre-fix your angularjs attributes with the data- attribute.

So ng-app would become data-ng-app. This would mean that your markup is valid html5 and still work with angularjs.

See these questions for reference.

AngularJS tags attributes

Can I use another prefix instead of `ng` with angularjs?

Answer 2

It is very late to this answer, but I wrote a basic tool called angular-html5 which will convert directives to data-directives automatically. There are also grunt and gulp plugins to be used in build steps.

That way you can still write:

<div ng-if="whatever"></div>

And it will turn into:

<div data-ng-if="whatever"></div>

Just add it to your workflow, and you can use it similarly to using ng-min for minification.

See Angular Directives Normalization Rules for further information.