I am learning about AngularJS and see it adds some of its own attributes that nor start with data neither are standard html tags attributes, like this:
<html ng-app>
or this:
<body ng-controller="PhoneListCtrl">
Where from do these ng-* attributes come and is that a valid HTML? Where can I read more about this?
Strictly speaking these extra attributes are not defined in the HTML specifications thus, are not valid HTML. You could say that AngularJS provides and parses a superset of the HTML specification.
However, as of v1.0.0rc1, you could use data-* attributes, for example <html data-ng-app>
which, I believe, are valid HTML5. Source.
There is a guide to the AngularJS Compiler that contains some more information on the process. In short; the AngularJS compiler reads your HTML page, using these attributes to guide it as it edits and updates your page, after loading, via javascript and the HTML DOM.
From the docs: http://docs.angularjs.org/guide/directive
<!doctype html>
<html data-ng-app>
<head>
<script src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div data-ng-controller="Ctrl1">
These are all valid directive declarations:<br/>
<input ng-model='name'> <hr/>
<span ng:bind="name"></span> <br/>
<span ng_bind="name"></span> <br/>
<span ng-bind="name"></span> <br/>
<span x-ng-bind="name"></span> <br/>
<span data-ng-bind="name"></span> <br/>
</div>
</body>
</html>
I like the data-*whatever*
declaration the best as it's HTML5 compliant.
So for any of my Angular declaration (e.g. ng-controller
, ng-app
, ng-repeat
etc) or custom directives I'll always prefix them with data-
.
Where from do these ng-* attributes come
From main ng module. Source code.
is that a valid HTML?
No. But attribute-style directives can be prefixed with x-, or data- to make it HTML validator compliant. See direcives documentation.
Another option is to ignore undefined attribute names. If you are using Eclipse, you can set this by going to project properties>>validation>>html syntax>>attributes>>ignore undefined attribute names
.