如何把 HTML模板檔案轉入 Angular 框架

這篇主要紀錄一下我把一個網路下載的模板融入 Angular 框架

為什麼我想將檔案套入 Angular 框架？

原本主要是想用一些圖表套件，Angular 可以直接在 .html 檔裡面寫變數比較方便做圖表呈現。

使用框架前後的差別

1. index.html

Original | 內容都集中在 index.html 裡面

Angular | 透過 <app-root>連結到畫面呈現的 component template，不用引入一堆 script、link

2. Javascript 引入方法

Original | 建立 js 檔，最後用 gulp 打包所有的 js 檔後輸出的檔案在 index.html 裡使用 <script> 引入

Angular | 畫面呈現的內容主要寫在 app.component.html ，這個 html 模板會有一個對應的檔案寫 js ( Angular 使用TypeScript，可以把它想成是 strong type 的 javascript)

3. CSS 設定

Original | 用 gulp 打包成 .min.css 檔，並在 index.js 中引入以下這段

<link href="css/resume.min.css" rel="stylesheet">

gulp

resume.css 打包壓縮-> resume.min.css

Angular | 剛剛說 app.component.html 會有一個對應的檔案寫 js，它同樣也有一個對應的檔案寫 css 檔 － app.component.css

4. 套件來源

Original | 套件主要是放在 vendor 資料夾後引入使用

Angular | 使用 npm 安裝 ex: fortawesome、bootstrap

關於 Angular

<canvas #doughtChart baseChart [data]="doughnutChartData" [labels]="doughnutChartLabels"
[chartType]="doughnutChartType" [options]="options"></canvas>

[ ] 代表這個標籤屬性後面 ” “ 讀入的是一個變數，所有上面這段中（下圖 110 行），doughnutChartData、doughnutChartLabels…都是寫在 app.component.ts 裡面的變數 (下下圖 24 行)

(不使用框架也能做到類似的效果，但是就麻煩許多了)

app.component.html

app.component.ts

使用 ngFor 精簡程式碼 ，158行 list 這個變數在 app.component.ts 中定義，結構如下

list = [{name: “apple”, score: ”100”}, {name: “banana”, score: ”90”}, {name: “cat”, score: ”80”}]

透過 {{list.name}} {{list.score}} 搭配 ngFor 只要一行就能顯示出以上三筆資料了

結尾

轉換的過程中當然不會這麼順利上面的幾個檔案改一改就結束了

原本的方式可能沒有辦法這麼順利融合，套入框架的過程中我有加入一些套件取代原本的效果，像是 scrollspy 原那段 jQuery 在 Angular 這裡面卻沒辦法跑，後來寫了一個 directive 替代，也發現原本工作上使用很順的東西原來是前人先設定好了，像是我將資料整理成 json 檔，並在component 中使用 require 引入才知道要先在 tsconfig 設定 compilerOptions type = “node” 才能用 require……

不過秉持著 Google 會陪伴你找答案的信念，最終還是順利完成了。