Menu
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?
835
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write.
AngularJS directives are extended HTML attributes with the prefix ng- . The ng-app directive initializes an AngularJS application. The ng-init directive initializes application data. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The $ in AngularJs is a built-in object.It contains application data and methods.
The Angular tag input allows us, to select one or more than one item from lists of options. It also allows us to add, remove, and manage tags on input. We can implement add tags input in different ways.
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.
74
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-.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
