Menu
When angularJs directive is defined, we have to name it in form of 'camelCase' syntax but when we use it, we have to name it in form of 'camel-case'. Question is why this is required ?
I know that it is for avoiding naming conflicts(now/in future) but why we have to name it differently while defining and while using. Can't we define it directly in form of 'camel-case' ?
932
TLDR; Use camelCase in the JS and dash-separated in the HTML as expected by the AngularJS compiler. Choose an unique two letters preffix for your directives and avoid the "ng-" preffix.
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.
We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel ). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model ).
There are two reasons why it's important.
First of all, HTML attributes are not case sensitive, meaning that "someName" and "somename" is the same attribute. So the best style is to use "kebab-case" notation to separate words in attribute name. That's why we use "attribute-name" syntax for HTML attributes and tag names.
On the other hand, kebab-case names are not valid identifiers in Javascript so in order to use such names as Angular directives we would have to use verbose bracket notation. But since in Javascript world camelCase is standard de-facto for naming variables and object properties, Angular uses normalization (see source) to convert kebab-case names to camelCase, and vice versa.
150
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
