念念不忘,必有迴響。有一口氣,點一盞燈,有燈就有人。

如何在 Visual Studio Code 執行 Wallaby 單元測試?

如何在 Visual Studio Code 執行 Wallaby 單元測試?

很羨慕 Visual Studio 有 Alive 可以即時跑單元測試嗎?只要安裝了 Wallaby,在 Visual Studio Code 也可以如 Alive 一樣為 Angular 即時跑 TypeScript 與 Jasmine 單元測試。

如何在 WebStorm 執行 Wallaby 單元測試?

如何在 WebStorm 執行 Wallaby 單元測試?

很羨慕 Visual Studio 有 Alive 可以即時跑單元測試嗎?只要安裝了 Wallaby,在 WebStorm 也可以如 Alive 一樣為 Angular 即時跑 TypeScript 與 Jasmine 單元測試。

如何在執行階段對 Angular 除錯?

如何在執行階段對 Angular 除錯?

由於 TypeScript 是編譯語言,很多人擔心該如何 debug Angular,尤其是 TypeScript 編譯沒錯,但在瀏覽器執行卻錯了,但因為 TypeScript 已經編譯成 JavaScript,我該怎麼知道錯在 TypeScript 哪一行呢?

如何使 WebStorm 存檔時自動刪除 whitespace?

如何使 WebStorm 存檔時自動刪除 whitespace?

Ng lint 預設會檢查是否有 trailing whitespace,尤其在 enter 換行時,WebStorm 為了排版漂亮,會自動新增 whitespace,這將導致 ng lint 的抱怨,希望在存檔時,自動刪除這些 whitespace。

如何使 WebStorm 的 Auto Import 符合 ng lint 格式?

如何使 WebStorm 的 Auto Import 符合 ng lint 格式?

WebStorm 的 auto import 非常方便,不過預設格式不符合 ng lint 要求,且 reformat code 之後,整個預設的 Angular 格式也會重新排版,該如何設定成符合 ng lint 要求的格式呢?

如何使用 Angular 實作下拉選單?

如何使用 Angular 實作下拉選單?

下拉選單為常用的使用者介面,該如何優雅地將資料綁定在元件上,並且優雅地取得使用者的選擇資料呢?

Protractor 的 getText() 回傳型別到底是什麼?

Protractor 的 getText() 回傳型別到底是什麼?

使用了 TypeScript 之後,對於型別就非常敏感,都會要求自己要將傳入參數的型別與回傳型別明確指定,但 Protractor 在 page object 常用的 getText(),到底回傳型別是什麼呢?

如何使 Protractor 跑 Headless Chrome?

如何使 Protractor 跑 Headless Chrome?

Angular CLI 的 Protractor 預設是跑 Chrome,但在 Chrome 59 之後提供了 Headless Chrome,讓我們以類似 PhantomJS 方式跑 E2E 測試。

重構到設計模式:使用 Adapter Pattern

重構到設計模式:使用 Adapter Pattern

Adapter pattern 是實務上常用的設計模式,本文將以實際案例,根據需求一步步重構,最後變成 adapter pattern。

如何在 Protractor 使用 $ 與 $$?

如何在 Protractor 使用 $ 與 $$?

在 Protractor 官網的 Using Locators,看到了 $$$ 兩個 shortcut,但在 Angular 卻無法使用,本文筆記解決方案。