AngularJs directive naming conventions

Question

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 thi

Answer 1

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.

Answer 2

Directives must have camel case names (for instance, fooBarDirective) because AngularJS converts camel case directive names to hyphen case .For instance

<foo-bar-directive>

or

< ...  foo-bar-directive>

for use in HTML(which is case insensitive).