Day 16：把做好的 HTML 加入 Angular 吧！

三天前，我们已成功把静态档案加入 Angular 的专案了，如果感到有点陌生，可以再到以下连结，重新回忆一下：

我们把静态档案加入专案的结果，可以在网址输入相对应的路径，然後把页面内容呈现出来，今天要做的事，直接将 Angular 应用程序的网页，套用静态档案的内容，直白的来说，就是把 drama-blog.html 的内容，变成 Angular 应用程序的首页。

首先，我们打开 drama-blog.html 这支档案，然後先把 head 标签里的内容先复制下来。

接着打开 index.html，把刚才复制的内容贴入到此档案的 head 标签内。

要特别注意的地方有以下几个：

记得保留 head 标签里的 <base href="/">，这个标签会决定整个网页的超连结，预设是以什麽为基础，所以十分重要，需要保留。
除了 <base href="/"> 之外的内容都可以删掉，然後将复制的内容贴上。
<base href="/"> 建议放至最上方，复制的内容放在 <base href="/"> 之下，因为我们的 HTML 版型，通常会在 head 里载入 CSS 或是 JavaScript，如果将这些放到 <base href="/"> 之前，可能会遇到档案找不到的状况。

接着我们要来处理 body 标签里的内容，首先我们要把 drama-blog.html 的 body 内容复制下来，接着找到 app component。

因为我是使用 VS Code，这里有个可以快速查找档案的快捷键，就是 ctrl+E，就可以很轻易的搜寻专案内的档案，而且搜寻的关键字打一部分即可，e.g. 输入 appcom，中间没输入 .，也没有打完整，仍然可以找到档案。

找到 app.component.html 档案并打开，将复制的 body 内容取代 app.component.html 原本的内容。

存档之後，打开 Angular 服务器的首页，就可以看到已变成 drama-blog.html 的内容了，代表我们成功将版型套用到 APP Component 里了。