How are template tags for components generated in Angular JS-CodePudding

I was tasked with adding some new features to an old system built with AngularJS. I'm a backend developer so I don't know js frameworks in deep but I have mostly figured out how Angular JS works, however I'm stuck with some html templates in components. The documentation shows an identical example of what I'm facing.

In a file called index.js I have

angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() {
  this.hero = {
    name: 'Spawn'
  };
});

I have another file called heroDetail.js containing

angular.module('heroApp').component('heroDetail', {
  templateUrl: 'heroDetail.html',
  bindings: {
    hero: '='
  }
});

An html file called index.html

<div ng-controller="MainCtrl as ctrl">
  <b>Hero</b><br>
  <hero-detail hero="ctrl.hero"></hero-detail>
</div>

And finally a file called heroDetail.html

<span>Name: {{$ctrl.hero.name}}</span>

My question is, how is the <hero-detail></hero-detail> tag generated? There seems to be no definition for it in the files nor in the entire project.

CodePudding user response：

here:

.component('heroDetail'

lower camel case goes to kebab case for the tag.

for example .component('myHeroDetail' would result in <my-hero-detail>

One of the many weird quirks of angularjs that was improved upon in angular 2.