CODEWITHSUNDEEP
angularjsmeteor
Ray Luo
Ray Luo

Reputation: 33

Meteor Angular Tutorial: Todos List's <todos-list></todos-list> tag

I am trying to go through Meteor's tutorial at https://www.meteor.com/tutorials/angular/templates There's a part that I can't figure out in their client/main.js:

<body>
<div class="container" ng-app="simple-todos">
    <todos-list></todos-list>
</div>
</body>

They just put a <todos-list> tag in the middle and that template is loaded. I can't figure out how the todos-list gets translated to the actual template, is there some name transformation convention that "todos-list" gets translated to "todosList" and referenced that way?

Thanks in advance

Upvotes: 3

Views: 218

Answers (2)

Yatrix
Yatrix

Reputation: 13775

todosList is a component. Since html doesn't support capitalization, you write todos-list in the tag. A component can come with a template (html mark-up) associated with it. So, when you put <todos-list></todos-list> in your html, angular will insert the html there. Look at the angular documentation for components and directives. There are tons examples on the web.

Upvotes: 1

JeremyK
JeremyK

Reputation: 3240

This is due to the Normalisation performed by AngularJS.

Normalization

Angular normalizes an element's tag and attribute name to determine which elements match which directives. 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).

The normalization process is as follows:

  1. Strip x- and data- from the front of the element/attributes.
  2. Convert the :, -, or _-delimited name to camelCase.

Link to AngularJS Docs here

Upvotes: 4

Related Questions