iT邦幫忙

0

將網路download的靜態網頁轉型成Angular應用程式

WM 2019-05-07 14:27:12369 瀏覽
  1. 下載版型

  2. 確認網頁是否能順利執行,個人使用lite-server。

  3. 建立Angular專案。

  4. 進入專案的index.html<head>內只留<base href="/">,其他可以刪除。

  5. 將SB Admin 2的index.html <head>內容搬到專案的index.html <head> 內的<base href="/">後面。

  6. 將SB Admin 2的index.html <body>內容搬到專案的app.component.html <body>內。
    有一點要注意,因為安全機制的關係(XSS攻擊),Angular不會在template執行JavaScript,所以要把<script>部分搬到專案的index.html <body>內的<app-root>之後。

  7. SB Admin 2的index.html <body>有設定ID名稱,表示應該有CSS或JS會吃到此ID,所以在專案的index.html也要做相同的設定。

  8. 將網頁資源搬到專案的assets底下。
    https://ithelp.ithome.com.tw/upload/images/20190506/20112573Z59E5QZXkJ.png

  9. 由於網頁資源都在assets底下,所以要修改index.html內 css、js 以及app.component.html內 img的路徑。只要在原路徑加上assets/即可。

  10. 這時版型已大致完成,但圖表卻是空白。
    https://ithelp.ithome.com.tw/upload/images/20190506/20112573eYtv7SM1Tz.png
    原本應該要這樣
    https://ithelp.ithome.com.tw/upload/images/20190506/20112573HpH0K2kBSq.png
    按F12開啟開發人員工具Network項目,重新整理網頁,確認是否有檔案未被載入(紅字),一切正常,切換到Console會發現問題。
    https://ithelp.ithome.com.tw/upload/images/20190506/201125732KKpAoJwHa.png
    原本預期會讀取某個物件的length屬性,但是卻找不到該物件,就會產生這個錯誤訊息,往下看,問題是來自於chart-area-demo.js的第32行。copychart-area-demo.js:32,在VS Code,按CTRL+E,搜尋列輸入
    https://ithelp.ithome.com.tw/upload/images/20190506/20112573sTXZhELrXl.png
    在第32行,new Chart建構式應該要接收到ctx,但卻找不到,往31行反推回去,我們假設應該是找不到Id:myAreaChart這個DOM,才會導致ctxnull
    https://ithelp.ithome.com.tw/upload/images/20190506/20112573J9I3r1PGvk.png
    為確認假設是否正確,在SB Admin 2中的chart-area-demo.js:32,將Id改成其他名稱,讓它找不到。結果顯示一樣的錯誤,所以我們的假設應該是正確的。
    回到index.html,看問題是怎麼發生的。當瀏覽器載入<app-root>,Angular還未將template(app.component.html)渲染到網頁上,此時還沒有DOM,緊接著就執行載入的chart-area-demo.js,所以會找不到Id:myAreaChart DOM。

  11. 知道問題後,解決方式就是讓chart-area-demo.js在template被載入後,才執行。
    採取的方式,是將chart-area-demo.js整個搬到app.componentngOnInit執行。
    此時會發現一堆錯誤,先看Chart,在assets/vendor/chart.js/Chart.js 中可以發現,Chart是全域變數。
    https://ithelp.ithome.com.tw/upload/images/20190506/20112573gKV0nqJdLX.png
    由於TypeScript是強型別的程式語言,無法辨識Chart,那要如何在app.component中存取全域變數呢?
    可以在app.component中宣告一個全域變數Chart
    https://ithelp.ithome.com.tw/upload/images/20190506/201125735m6TiR5Kmo.png
    問題就解決了

  12. 接下來,我們來看變數s的錯誤訊息。
    https://ithelp.ithome.com.tw/upload/images/20190506/20112573OvRDa2tbcu.png
    訊息表示,sstring型別,若將array型別指派給它,在TS是不允許的。
    所以找到宣告s的地方(前幾行),將型別改為any,就可以了。
    https://ithelp.ithome.com.tw/upload/images/20190506/20112573jHIiJEVp01.png

  13. 最後一個錯誤顯示
    https://ithelp.ithome.com.tw/upload/images/20190506/20112573IuCMdBAjOm.png
    錯誤說明很明顯了,number_format需要4個引數,但只給1個。
    找到宣告number_format的地方,將所有參數改為optional(選擇性),只要在參數後加問號(?)即可。
    https://ithelp.ithome.com.tw/upload/images/20190506/20112573xydh8IWMW6.png

  14. 其中一個圖表可以顯示了。無需在index.html中,載入chart-area-demo.js,移除即可。
    但錯誤還有一個(chart-pie-demo.js:7),也是相同狀況,找不到DOM,因此可以採取同樣的步驟。
    https://ithelp.ithome.com.tw/upload/images/20190506/2011257327cQcW8DDo.png
    https://ithelp.ithome.com.tw/upload/images/20190506/20112573yckaO5UFT3.png
    只是如此一來app.component的code就會變得又臭又長,解決方式就是將JS給獨立出來。

  15. 選取要獨立的JS,按CTRL+.,會出現一個超長選單,選取最下面選項。
    https://ithelp.ithome.com.tw/upload/images/20190506/20112573OtyvzaBwxi.png
    將檔案獨立成一個function,命名為chartAreaDemo
    https://ithelp.ithome.com.tw/upload/images/20190506/20112573RgIpBbgNJo.png
    點擊燈泡,選取移至新檔,function會完全獨立於src底下。
    https://ithelp.ithome.com.tw/upload/images/20190506/20112573BcsVHyYugQ.png
    https://ithelp.ithome.com.tw/upload/images/20190506/201125735NgGOkuRHF.png
    重新整理後,會產生新的問題
    https://ithelp.ithome.com.tw/upload/images/20190506/20112573wDTjpCYniI.png
    從警告訊息(黃色)得知,export出來的Chart無法在app.component找到,照理說只要在chartAreaDemo.ts
    宣告變數Chart即可,但待會要搬動的chart-pie-demo.js也有用到Chart,所以全域變數Chart勢必得獨立出來。
    因此可以使用一個特別的方式,在src底下新增一個檔案typings.d.ts,在裡面宣告全域變數Chartdeclare var Chart: any;,如此一來,所有的TS都能存取到Chart
    chartAreaDemo.ts也不需要再importChart了,所以第一行(import { Chart } from './app.component';)可以刪掉。

  16. 此時,可以從Console看出,只剩一個問題了,先將chart-area-demo.js的內容搬到ngOnInit,沒有錯誤發生,就按照剛剛的步驟(15)再做一次。在index.html匯入的chart-area-demo.js一併移除。
    app.component變得乾淨許多。
    https://ithelp.ithome.com.tw/upload/images/20190506/20112573MvaXrmQ5Cj.png

  17. 最後還有一個問題要解決,sidebar縮放功能失效了。
    https://ithelp.ithome.com.tw/upload/images/20190507/20112573xMoIXog5Pc.png
    以button的id搜尋
    https://ithelp.ithome.com.tw/upload/images/20190507/20112573w19VYQxs02.png
    發現是sb-admin-2.js在控制的
    https://ithelp.ithome.com.tw/upload/images/20190507/20112573BjeRF6648F.png
    應該也是找不到DOM而失效的,再採取相同的解決步驟。
    typings.d.ts
    https://ithelp.ithome.com.tw/upload/images/20190507/20112573TO0W9yFJ9E.png
    app.component
    https://ithelp.ithome.com.tw/upload/images/20190507/20112573I8CJe0uNBs.png

OK!我們已經成功把別人的版型給完整套用至Angular應用程式了。


尚未有邦友留言

立即登入留言