Angular JS中组件的模板标签是如何生成的

Question

我的任务是为使用 AngularJS 构建的旧系统添加一些新功能。我是一名后端开发人员，所以我不太了解 js 框架，但我基本上已经弄清楚 Angular JS 是如何工作的，但是我在组件中使用了一些 html 模板。该文档显示了我所面临的相同示例。

在一个名为 index.js 的文件中，我有

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

我有另一个名为 heroDetail.js 的文件，其中包含

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

一个名为 index.html

的 html 文件

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

最后一个名为 heroDetail.html

的文件

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

我的问题是，<hero-detail></hero-detail> 标签是如何生成的？在文件和整个项目中似乎都没有定义它。

Answer 1

此处：

.component('heroDetail'

标签的小驼峰式转为烤肉串式。

例如 .component('myHeroDetail' 将导致 <my-hero-detail>

angularjs 在 angular 2.

中得到改进的许多奇怪怪癖之一

How are template tags for components generated in Angular JS