angularjs - AngularJS tags

Development/AngularJS 2013. 10. 13. 11:45


AngularJS tags attributes

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?

 
share|improve this question
up vote12down voteaccepted

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.

share|improve this answer
 
Just to leave this clear, yes, data-X is HTML5-compliant, since the data- prefix is for custom attributes.–  Hugo Jun 23 at 8:19
up vote5down vote

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.

share|improve this answer
up vote4down vote

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-.

share|improve this answer




출처 - http://stackoverflow.com/questions/12107504/angularjs-tags-attributes


저작자표시

'Development > AngularJS' 카테고리의 다른 글

angularjs - AngularJS & RequireJS  (0) 2014.02.03
AngularJS  (0) 2013.10.13
Posted by linuxism
,

티스토리툴바