AngularJS tags attributes

Question

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?

Alexander R · Accepted Answer · 2012-08-24 10:57:56Z

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.

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

Artem Andreev · Answer 2 · 2012-08-24 10:55:56Z

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.

GFoley83 · Answer 3 · 2013-09-04 22:36:17Z

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

javascript - document.body.scrollTop (0)	2013.11.02
Backbone.js (0)	2013.10.13
javascript - RequireJS (0)	2013.10.02
javascript - 크롬에서 동적으로 로드된 js 파일 디버깅 방법 (0)	2013.07.28
javascript - forms 객체 (0)	2013.05.13

angularjs - AngularJS & RequireJS (0)	2014.02.03
AngularJS (0)	2013.10.13

Value	Description
normal	Break words according to their usual rules
break-all	Lines may break between any two letters
keep-all	Breaks are prohibited between pairs of letters

inherit	말그대로 상속 받는 것
normal	일반적인 것, default
nowrap	줄바꿈을 하지 않는다
pre	<pre>태그와 같은 기능, 마크업에서 앤터로 줄바꿈 한것 만 적용이 되고 넘어가는 것에는 줄바꿈 하지 않는다
pre-line	마크업에서 줄바꿈 한 것이 적용 되면서 width를 넘어가는 텍스트도 자동으로 줄바꿈이 된다
pre-wrap	pre-line 과 비슷

css - 미디어쿼리(media query) @media (0)	2013.11.19
css - 넓이(width)와 높이(height) 자동 조정하기 (0)	2013.10.29
CSS - 개발 생산성을 높이는 도구들 (0)	2013.09.16
css 수직 정렬 (0)	2012.12.24
css - div 에서 text 수직 정렬 시키기 (0)	2012.06.28

linuxism

javascript - 라우팅

라우터(Router)에 대해

라우팅(Routing)

선택(Condition?)

조건문(Conditional Statement)

조건문의 제거

라우터

라우터와 조건문의 차이

매핑규칙(Mapping Rule)

트리거, 테이블, 타겟, 규칙

결론

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

angularjs - AngularJS tags

AngularJS tags attributes

3 Answers

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

css - 글자 자동 줄바꿈 word-break white-space

CSS3 word-break Property

[CSS] 텍스트 줄바꿈 처리 word-break, white-space

word-break

white-space

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

카테고리

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

링크

티스토리툴바