三天前，我們已成功把靜態檔案加入 Angular 的專案了，如果感到有點陌生，可以再到以下連結，重新回憶一下：

Day 13：來把靜態檔案加入 Angular CLI 建立的專案吧！

我們把靜態檔案加入專案的結果，可以在網址輸入相對應的路徑，然後把頁面內容呈現出來，今天要做的事，直接將 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 裡了。