[從 0 開始的 Angular 生活]No.10 將網頁加入 Angular 應用程式

發表於 | 更新於 | 分類於

前言

上一篇提到了如何把靜態資源加入到以 Angular CLI 建立的專案內，但這樣子是不夠的。我們希望能夠把這個網頁版型加入到 Angular 內，以 Component 的形式被管理，那該怎麼做呢？

觀察 index.html

打開 index.html ，整份網頁大致上可以拆分成 head 區塊以及 body 區塊。head 區塊是沒辦法拆成 Component 的，只有在 body 區塊才可以拆 Component 。

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FirstAngular</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

我用的網頁版型 HTML 部分還蠻多的，就不貼上來了。

也就是說：

  • 可以直接將靜態網頁的版型 head 部分直接複製貼上到 index.html
  • 把網頁版型中的 body 區塊貼到 AppComponent 的 HTML Template 內

了解該怎麼做之後，我們就動手吧！

head 部分的處理

這邊只有一點要注意，在 index.html 中有一個標籤很特別 <base> 。
base 標籤是用來控制網頁內的其他超連結，而這個標籤在這裡的用意是規定一個基準的 Url 路徑，也就是之後這張網頁內的其他超連結的基準都是從 / 開始找起。

所以我們把複製的內容放到 base 標籤下方，像這樣：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="en">
<head>
  <base href="/">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="/assets/styles/mainapp.css" rel="stylesheet">
  <link rel="shortcut icon" href="http://blog.miniasp.com/favicon.ico" type="image/x-icon">
  <meta name="description" content="Lorem, ipsum dolor.">
  <meta name="author" content="pvt5r486">
  <title>Lorem, ipsum dolor.</title>
</head>
<body>
  <app-root></app-root>
</body>
</html>

body 部分的處理

這部分因為 HTML 很多，所以就不貼上來了，將網頁版型中的 body 區塊貼到 AppComponent 的 HTML Template 內。

這邊有個小技巧，可以按下 Ctrl + E 透過搜尋的方式快速找到檔案，找到後就整個取代貼上吧。

實際執行看看

執行 npm start 命令，觀察實際在瀏覽器上呈現的情形。

但畫面上空空如也，為什麼？

打開開發者工具發現一段錯誤：

在 Angular 中，只能使用 HTML5 規範的 HTML 標籤，而我使用的這個版型用到的這個 hgroup 標籤並不符合 HTML5 規範。

處理方式有很多種，其中最簡單的就是將其改成 div 標籤即可。

以下轉自保哥 Blog

關於 hgroup 標籤的補充：
早期在 HTML5 規格尚未發佈正式版的時候，當時是有 hgroup 元素的，但 HTML5 工作小組在 2013/4/2 的一次會議結論中決定從規格中移除 hgroup 元素，因此請大家不要再用這個 hgroup 元素。

這樣就搞定了！

Image

小結

這樣我們就成功地把一份網頁版型加入到 Angular 內並且以 Component 的方式管理，所以可以到上一篇提到的 angular.json 檔案內把之前加入到 assets 內的 src/blog-index.html 給移除囉，因為已經用不到了。

0%