胖熊NET,有趣实用的生活常识!

最新更新文章排行手机版

胖熊NET!

热门搜索:
当前位置: > 情感

index.htm

时间:2024-03-09 01:34:02人气:88作者:用户投稿

难度

中级

学习时间

半小时

学前准备

有一定编程经验。

开发语言

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”位置及内容如下:

index.htm

具体内容:

index.htm

这就是一个普通的html。

里面只说两点,第一点是我们之前讲解过的网站头像“favicon.ico”,还有一点是没有讲解过的“app-root”组件选择器。后者是重点。

2.网站头像“favicon.ico”

首先,我们来看看网站头像,这个之前讲解过,但是在“index.html”里面还没有讲解。

涉及到的代码如下:

index.htm

这是一个icon的引用,将“favicon.ico”设置为网站头像。

注意看,href属性值直接写的是“favicon.ico”,也就是说“favicon.ico”所在的目录是和“index.html”是同一个目录。

index.htm

3.“app-root”组件选择器

接着往下看,我们会看到一个比较奇怪的标签:

index.htm

Q:这个标签叫什么?

这个叫组件选择器也叫CSS选择器。

Q:什么叫组件选择器?

从它的名字中可以得知两点:组件和选择器。其中选择器是组件在HTML中的名字。

Q:什么是组件?

官方描述:

组件控制屏幕上被称为视图的一小片区域。

不知道对官方描述有没有理解,没理解也没关系,下一章就会详细讲解到什么组件。

Q:app-root这个组件选择器实际对应的组件是什么?

app-root组件选择器对应的是应用中AppComponent组件。

Q:AppComponent组件在哪?

index.htm

如图所示,中app目录下的“app.component.ts”文件中,用Typescript写成。

它的具体内容如下:

index.htm

Q:我在图片中看到了“app-root”,想问包括它自身所在的这一行是什么意思?

官方描述:

selector:是一个CSS选择器,它会告诉Angular,一旦在模板HTML中找到了这个选择器对应的标签,就创建并插入该组件的一个实例。比如,如果应用的HTML中包含<app-root></app-root>,Angular就会在这些标签中插入一个AppComponent实例的视图。

这个描述应该很清楚了,将组件的视图插入到选择器所在的位置。

至此,“index.html”相关的讲解就先告一段落了,里面还有其它没有讲解的内容暂时不作重点。

后续还会再接触的,用到时再作分析。

答疑

如果大家有问题或想了解更多前沿技术,请在下方留言或评论,我会为大家解答。

上一章

Angular第十八章:应用入口“main.ts”

下一章

Angular第二十章:app开发目录

学习小组

加入同步学习小组,共同交流与进步。

方式一:通过关注我们的头条号,然后私信我们。方式二:通过公众号gorhaf,回复“Angular学习小组”。关注我们

如果你也热爱前沿技术,欢迎关注我们。

版权声明

原创不易,未经允许不得转载!

标签:
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至123@。cc举报,一经查实,本站将立刻删除。