How app-info is recognized in Angular js Lesson 2 Directives II


#1

I can able to understand how <app-info info="shutterbugg"></app-info> info is getting picked as it is being declared in js/directives/appInfo.js and how shutterbugg fetches its contents from MainController.js but how html tag is getting recognized?Where this tag is defined? Could you please help?


#2

You can find all information in the documentation. If you don't know something - first check the documentation.

This is the part you are interested in -> https://docs.angularjs.org/guide/directive#matching-directives

Every language has a style guide and naming convention. For example in JavaScript we use camelCase, in plain PHP we usually use snake_case and in HTML dash-case (also called train-case) is recommended. Angular apps are written mostly in JS, but with the use of custom HTML elements. So at the level of language design, it was kind of problematic to select naming convention, camelCase in HTML code or train-case in JS? No way.

Angular respects style guides, that is why we can use camelCase in JavaScript and train-case in HTML. How is this possible? There is a special normalization process.

Basically, we can determine the name of our custom HTML element by changing all uppercase letters to lowercase and preceding them with a dash. So A becomes -a etc.

That's why directive appInfo uses app-info element :slight_smile: