中级
学习时间半小时
学前准备有一定编程经验。
开发语言Typescript
开发环境Node.jsv10.9.0npmv6.2.0WebStormv2018.2.3AngularCLIv6.1.51.主页面“index.html”官方描述什么是“index.html”？
官方是这样描述的：
这是别人访问你的网站是看到的主页面的HTML文件。大多数情况下你都不用编辑它。在构建应用时，CLI会自动把所有js和css文件添加进去，所以你不必在这里手动添加任何<script>或<link>标签。
从中我们可以得出以下三点：
“index.html”是用户访问我们网站第一个看到的页面。在构建Angular应用时，AngularCLI会自动的将所需的JS和CSS文件添加到“index.html”中。如需第三方JS或CSS则手动添加。“index.html”位置及内容如下：
具体内容：
这就是一个普通的html。
里面只说两点，第一点是我们之前讲解过的网站头像“favicon.ico”，还有一点是没有讲解过的“app-root”组件选择器。后者是重点。
2.网站头像“favicon.ico”首先，我们来看看网站头像，这个之前讲解过，但是在“index.html”里面还没有讲解。
涉及到的代码如下：
这是一个icon的引用，将“favicon.ico”设置为网站头像。
注意看，href属性值直接写的是“favicon.ico”，也就是说“favicon.ico”所在的目录是和“index.html”是同一个目录。
接着往下看，我们会看到一个比较奇怪的标签：
Q：这个标签叫什么？
这个叫组件选择器也叫CSS选择器。
Q：什么叫组件选择器？
从它的名字中可以得知两点：组件和选择器。其中选择器是组件在HTML中的名字。
Q：什么是组件？
官方描述：
组件控制屏幕上被称为视图的一小片区域。
不知道对官方描述有没有理解，没理解也没关系，下一章就会详细讲解到什么组件。
Q：app-root这个组件选择器实际对应的组件是什么？
app-root组件选择器对应的是应用中AppComponent组件。
Q：AppComponent组件在哪？
如图所示，中app目录下的“app.component.ts”文件中，用Typescript写成。
它的具体内容如下：
Q：我在图片中看到了“app-root”，想问包括它自身所在的这一行是什么意思？
官方描述：
selector：是一个CSS选择器，它会告诉Angular，一旦在模板HTML中找到了这个选择器对应的标签，就创建并插入该组件的一个实例。比如，如果应用的HTML中包含<app-root></app-root>，Angular就会在这些标签中插入一个AppComponent实例的视图。
这个描述应该很清楚了，将组件的视图插入到选择器所在的位置。
至此，“index.html”相关的讲解就先告一段落了，里面还有其它没有讲解的内容暂时不作重点。
后续还会再接触的，用到时再作分析。
答疑如果大家有问题或想了解更多前沿技术，请在下方留言或评论，我会为大家解答。
上一章Angular第十八章：应用入口“main.ts”
下一章Angular第二十章：app开发目录
学习小组加入同步学习小组，共同交流与进步。
方式一：通过关注我们的头条号，然后私信我们。方式二：通过公众号gorhaf，回复“Angular学习小组”。关注我们如果你也热爱前沿技术，欢迎关注我们。
版权声明原创不易，未经允许不得转载！
显示全部
收起
最新更新 | 文章排行 | 滇ICP备2023006777号 | 网站地图
