官方是这样描述的:
这是别人访问你的网站是看到的主页面的 HTML 文件。 大多数情形下你都不用编辑它。 在构建运用时,CLI 会自动把所有 js 和 css 文件添加进去,以是你不必在这里手动添加任何 <script> 或 <link> 标签。
从中我们可以得出以下三点:
“index.html”是用户访问我们网站第一个看到的页面。在构建Angular运用时,Angular CLI会自动的将所需的 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”是同一个目录。
3.“app-root”组件选择器
接着往下看,我们会看到一个比较奇怪的标签:
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学习小组”。关注我们如果你也热爱前沿技能,欢迎关注我们。
版权声明原创不易,未经许可不得转载!