Article 四月 06, 2020

使用Angular自訂元素! Angular Elements使用教學與心得

Words count 9.3k Reading time 8 mins.

angular elements 可以將 angular 的元件內容打包成自訂元件-web components,能夠在脫離 angular 的框架,在其他的環境運作。目前 web components...

Read article

Article 三月 17, 2020

使用ngrok快速讓外部網路連接本機localhost

Words count 1.8k Reading time 2 mins.

身為一名前端開發人員,雖然主要工作是支援桌面系統可以正常運行,但同時間也要兼顧行動裝置的支援。chrome的開發工具可以幫助開發者模擬手機或平板的使用狀況。但是模擬終究是模擬,若是沒有實際拿手機或平板來使用一下,總會有點疙瘩,不敢保證使用一定正常。

如果要讓行動裝置連上目前正在開發中的內容,有兩種辦法

  1. 將要測試的內容部屬至測試機,用行動裝置連接到測試機測試
  2. 讓外部網路可以連接到自己的本機環境

兩種都是可行的辦法,但是第一種辦法有很明顯的缺點:

  • 不一定有測試機的部屬權限
  • 就算有權限,部屬需要...
Read article

Article 三月 02, 2020

實驗探討angular中的constructor與ngOnInit有什麼差別

Words count 5k Reading time 5 mins.

Angular中的元件(component)啟動的時候,分別會觸發兩個事件:

  • constructor
  • ngOnInit
    constructor是javascript中class產生出來時候會執行的建構式
    ngOnInit則是Angular眾多生命週期中的其中之一,會在元件(component)啟動的時候觸發,

針對這兩個來做個簡單的實驗與比較。

分別對ngOnInit和constructor下console觀察兩者顯示的先後順序

import { Component, OnInit } from...
Read article

Article 二月 12, 2020

如何快速移除 node modules

Words count 791 Reading time 1 mins.

常在測試或開發的時候,遇到詭異的狀況。通常會移除node modules裡面的東西,重新安裝相依的套件,就像電腦有問題重新開機治百病那樣。但是直接右鍵刪除node modules資料夾的時候,常常有一些莫名奇怪的問題導致刪除失敗,例如權限或是檔名太長無法刪除等等問題。

於是找到一個不錯的套件,可以下指令一鍵刪除node modules裡面所有的檔案
首先先安裝套件:

npm install rimraf -g

安裝完畢之後,再到要刪除的目錄下,輸入:

rimraf node_modules

輸入完之後...

Read article

Article 一月 30, 2020

github-actions-test

Words count 22 Reading time 1 mins.

test github ci

Read article

Article 十月 16, 2019

(DAY-30) (番外篇)知識論-什麼是知識呢?-Angular 與 Nestjs 共舞

Words count 2.7k Reading time 2 mins.

最後一篇本來想個結束感言,畢竟持續寫了30天,說沒有收穫是騙人的。但是我想這些收穫就放在心中吧。

最後一篇就來聊聊不一樣的主題-哲學
哲學是我在大學學到並且覺得很受用的一門學科,雖然從當時當現在都覺得不太好,常常在及格邊緣,但是還是覺得學到很多不只是分數,而是對於寫程式至人生都很重要的東西

於是就來聊聊哲學的一個很重要的問題-什麼是知識?
什麼是知識是一個從古希臘時代到現在都還在討論的問題,什麼樣的內容可以稱為知識?什麼樣的內容不可以稱為知識?
探討什麼是知識的學科稱為知識論(Epistemology...

Read article

Article 十月 15, 2019

(DAY-29) Angular 與 Nestjs 前後端合體技-Angular 與 Nestjs 共舞

Words count 3.6k Reading time 3 mins.

瞭解了這麼多Angular與Nestjs的相關知識之後,再來要想辦法將一個前端與一個後端融合在一起。

要如何融合在一起呢?預計要做以下幾件事情

  • Angular可以使用HttpClient去呼叫API取得所有書籍的資料
  • Nestjs可以獲得Angular發送過來的請求,將書籍的資料返回
  • Angular接受到Nestjs返回的資料
  • Angular綁定返回的資料,使用ngFor顯示所有書籍的資料Nestjs有一個Serve Static可以讓Nestjs去讀取像Angular、React、Vue 這...
Read article

Article 十月 14, 2019

(DAY-28) Nestjs 中介層(Middleware)-Angular 與 Nestjs 共舞

Words count 3.6k Reading time 3 mins.

中介層(Middleware)是在客戶端發出請求至控制器的路由之前的方法

中介層可以在控制器的路由收到請求之前,取得請求內容,對於請求內容做加工和修改。如果有使用過express的開發者一定對中介層不陌生,Nestjs的中間層完全等同於expres的中介層
如果沒有使用過express也不用擔心,以下是擷取於express官方網站對於中介層的介紹:

  • 執行任何程式
  • 對請求和回應做出修改
  • 結束請求和回應的生命週期
  • 如果中介層有多個的話,執行下一個中介層

使用Nestjs CLI 建立中介層

nest...
Read article

Article 十月 13, 2019

(DAY-27) Nestjs 異常過濾器(Exception filters)-Angular 與 Nestjs 共舞

Words count 5.1k Reading time 5 mins.

Nestjs 有一個框架層級的異常處理機制,負責捕捉所有的異常狀態。如果有異常狀態沒有被處理的話,那麼Nestjs的異常處理器便會發出回應,說明某些地方異常出錯了。

因此當有錯誤是沒有被處理的時候,就會回傳預設的錯誤訊息:

{
    "statusCode": 500,
    "message": "Internal server error"
}

當然,除非是預期之外的錯誤,不然基本上所有可以預期的錯誤都是要去處理的

Nestjs內建HttpException...

Read article

Article 十月 12, 2019

(DAY-26) Nestjs 管道(Pipe) 2- 轉換資料-Angular 與 Nestjs 共舞

Words count 3.3k Reading time 3 mins.

上一篇提到使用管道來驗證資料,在傳送資料進入到控制器之前,先驗證資料是否正確,以前做無謂的功或者避免因為缺少資料讓後面的流程爆炸。
管道除了用來驗證資料以外,也可以用來轉換資料。

管道在轉換的時候,可以完全覆蓋原本傳送過來的值。就可以想像到一種使用情境:例如從客戶端傳送過來的參數,可能不甚準確、或有遺漏,導致無法使用參數獲得想要的結果。為了不讓參數變得毫無作用,可以使用管道將參數轉換成合法且可以使用的型態,填補了客戶端和伺服器端之間的空白

本次要來建立一個轉換整數的管道,名為:parseInt

nest...
Read article
Load more
0%