iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 1 留言 4381 瀏覽

鐵人賽 Modern Web DAY 29

Angular 深入淺出三十天：表單與測試系列第 29 篇

技術 Angular 深入淺出三十天：表單與測試 Day29 - ControlContainer

昨天跟大家分享了自訂表單元件的作法，但昨天的作法只適用於一個欄位、一個 FormControl 。雖然 FormControl 裡是可以設 {} 的值，但如...

Leo ‧ 2021-10-14 ‧團隊請支援 Coding

1 Like 0 留言 2638 瀏覽

鐵人賽 Modern Web DAY 29

Javascript 從寫對到寫好系列第 29 篇

技術 Day 29 - 淺談測試 - 令人安心的保護網

前言前兩天我們討論了 Clean Code 跟 The Clean Coder，這兩本書都要提到一件很重要的事情，但前兩天沒有討論到，就是關於「測試」。所以...

ycchiuuuu ‧ 2021-10-14 ‧團隊鐵人賽臻融一

0 Like 0 留言 3313 瀏覽

鐵人賽 Mobile Development DAY 29

寫一個列車抵站時間 Android App 系列第 29 篇

技術 Leftover topics

我們終於來到第廿九篇，我們這次討論的題目都是之前討論過的東西的延伸。因為篇幅和時間有限就只好把它們合併成一篇。 Two-way data binding 我們在...

Eric Li ‧ 2021-10-14

0 Like 2 留言 3480 瀏覽

鐵人賽 Modern Web DAY 28

Angular 深入淺出三十天：表單與測試系列第 28 篇

技術 Angular 深入淺出三十天：表單與測試 Day28 - 自訂表單元件

經過了這段時間的練習與學習，相信大家應該越來越能體會 Angular 表單的強大與便利。不過既然 Angular 表單這麼好用，如果能讓自己做的 Compo...

Leo ‧ 2021-10-13 ‧團隊請支援 Coding

1 Like 3 留言 3853 瀏覽

鐵人賽 Modern Web DAY 27

Angular 深入淺出三十天：表單與測試系列第 27 篇

技術 Angular 深入淺出三十天：表單與測試 Day27 - Reactive Forms 進階技巧 - 跨欄位驗證

今天想要跟大家分享的是跨欄位驗證的小技巧，這個小技巧其實沒有多厲害或多特別，只是可能滿多人剛好不知道原來可以這樣用。而我們在 Day 23 - Reacti...

Leo ‧ 2021-10-12 ‧團隊請支援 Coding

0 Like 1 留言 4932 瀏覽

鐵人賽 Modern Web DAY 26

Angular 深入淺出三十天：表單與測試系列第 26 篇

技術 Angular 深入淺出三十天：表單與測試 Day26 - 進階表單開發技巧 - 自訂驗證器

之前在開發表單的時候，我們都是使用 Angular 所提供的驗證器來驗證表單欄位裡的值是否符合我們的需求。雖然 Angular 已經這麼貼心地提供了這麼多驗...

Leo ‧ 2021-10-11 ‧團隊請支援 Coding

0 Like 1 留言 2208 瀏覽

鐵人賽 Modern Web DAY 25

Angular 深入淺出三十天：表單與測試系列第 25 篇

技術 Angular 深入淺出三十天：表單與測試 Day25 - 測試進階技巧 - DI 抽換

好一陣子沒寫單元測試與整合測試了，大家是否覺得有些生疏了呢？之前的測試都寫得很簡單，正好昨天好好地寫了搜尋輸入框還有呼叫 API ，可以藉由撰寫這個功能的測...

Leo ‧ 2021-10-10 ‧團隊請支援 Coding

2 Like 2 留言 3630 瀏覽

鐵人賽 Modern Web DAY 24

Angular 深入淺出三十天：表單與測試系列第 24 篇

技術 Angular 深入淺出三十天：表單與測試 Day24 - Reactive Forms 進階技巧 - Auto-Complete Searching

在日常生活中，大家應該滿常看到有些系統的搜尋輸入框是可以在一邊打字的同時，一邊將搜尋結果呈現在一個下拉選單裡，非常地貼心且方便。當然，這其中其實有很多細節，...

Leo ‧ 2021-10-09 ‧團隊請支援 Coding

0 Like 1 留言 4032 瀏覽

鐵人賽 Modern Web DAY 23

Angular 深入淺出三十天：表單與測試系列第 23 篇

技術 Angular 深入淺出三十天：表單與測試 Day23 - Reactive Forms 進階技巧 - 欄位連動檢核邏輯

大家在日常生活中，應該看過滿多表單的某個欄位會隨著另個欄位的改變，而造成該欄位的驗證邏輯需要改變的情況吧？舉例來說，可能會有個欄位叫做聯絡資訊，使用者可以選...

Leo ‧ 2021-10-08 ‧團隊請支援 Coding

1 Like 1 留言 2898 瀏覽

鐵人賽 Modern Web DAY 22

Angular 深入淺出三十天：表單與測試系列第 22 篇

技術 Angular 深入淺出三十天：表單與測試 Day22 - 把 Cypress 變成 TypeScript 版

平常都用慣 TypeScript 版的 Cypress，但這兩天都用 JavaScript 在寫測試，令我有點不太習慣。雖然 JS 版或 TS 版的差別並沒...

Leo ‧ 2021-10-07 ‧團隊請支援 Coding

0 Like 1 留言 2351 瀏覽

鐵人賽 Modern Web DAY 21

Angular 深入淺出三十天：表單與測試系列第 21 篇

技術 Angular 深入淺出三十天：表單與測試 Day21 - E2E 測試實作 - 被保人表單

大家如果對於昨天的 E2E 測試如果沒有什麼問題的話，今天就來為我們的被保人表單撰寫 E2E 測試吧！實作開始撰寫測試前的準備昨天有說過了，今天就不再贅...

Leo ‧ 2021-10-06 ‧團隊請支援 Coding

0 Like 0 留言 2274 瀏覽

鐵人賽 Modern Web DAY 20

Angular 深入淺出三十天：表單與測試系列第 20 篇

技術 Angular 深入淺出三十天：表單與測試 Day20 - E2E 測試實作 - 登入系統

經過這兩天的介紹，相信大家對於 Cypress 應該已經有了一定程度的理解，有沒有人已經開始用它來寫測試了呢？今天就讓我帶著大家用 Cypress 來為我們...

Leo ‧ 2021-10-05 ‧團隊請支援 Coding

0 Like 0 留言 3455 瀏覽

鐵人賽 Modern Web DAY 19

Angular 深入淺出三十天：表單與測試系列第 19 篇

技術 Angular 深入淺出三十天：表單與測試 Day19 - 與 Cypress 的初次見面（下）

昨天跟大家初步地分享了 Cypress 怎麼安裝、 Cypress 的資料夾結構、 Cypress Test Runner 有哪些功能、和 Cypress...

Leo ‧ 2021-10-04 ‧團隊請支援 Coding

0 Like 0 留言 4873 瀏覽

鐵人賽 Modern Web DAY 18

Angular 深入淺出三十天：表單與測試系列第 18 篇

技術 Angular 深入淺出三十天：表單與測試 Day18 - 與 Cypress 的初次見面（上）

昨天跟大家分享了 Cypress 有多厲害之後，大家有沒有很期待呢？這兩天就讓我來跟大家介紹 Cypress 到底有多厲害吧！由於 Cypress 的功...

Leo ‧ 2021-10-03 ‧團隊請支援 Coding

1 Like 0 留言 7965 瀏覽

鐵人賽 Modern Web DAY 17

Angular 深入淺出三十天：表單與測試系列第 17 篇

技術 Angular 深入淺出三十天：表單與測試 Day17 - E2E 自動化測試工具簡介

在這個各種前端框架、開發工具層出不窮、百花齊放、百鳥齊鳴的美好時代， E2E 自動化測試工具的選擇自然也很多。今天我們會先來初步了解一下目前有哪些 E2E...

Leo ‧ 2021-10-02 ‧團隊請支援 Coding

1 Like 0 留言 3608 瀏覽

鐵人賽 Modern Web DAY 16

Angular 深入淺出三十天：表單與測試系列第 16 篇

技術 Angular 深入淺出三十天：表單與測試 Day16 - Template Driven Forms vs Reactive Forms

這段期間，我們用 Template Driven Forms 與 Reactive Forms 各自做了一個登入表單（靜態）與被保人表單（動態），而且我們也都...

Leo ‧ 2021-10-01 ‧團隊請支援 Coding

0 Like 1 留言 1678 瀏覽

鐵人賽 Modern Web DAY 15

Angular 深入淺出三十天：表單與測試系列第 15 篇

技術 Angular 深入淺出三十天：表單與測試 Day15 - 整合測試實作 - 被保人 by Reactive Forms

昨天幫我們用 Reactive Forms 所撰寫的被保人表單寫完單元測試之後，今天則是要來為它寫整合測試。大家還記得整合測試的目標是要測什麼嗎？我幫大家複...

Leo ‧ 2021-09-30 ‧團隊請支援 Coding

0 Like 1 留言 3085 瀏覽

鐵人賽 Modern Web DAY 14

Angular 深入淺出三十天：表單與測試系列第 14 篇

技術 Angular 深入淺出三十天：表單與測試 Day14 - 單元測試實作 - 被保人 by Reactive Forms

今天我們要來為我們用 Reactive Forms 所撰寫的被保人表單寫單元測試，如果還沒有相關程式碼的朋友，趕快前往閱讀第十一天的文章： Reactive...

Leo ‧ 2021-09-29 ‧團隊請支援 Coding

0 Like 1 留言 1931 瀏覽

鐵人賽 Modern Web DAY 13

Angular 深入淺出三十天：表單與測試系列第 13 篇

技術 Angular 深入淺出三十天：表單與測試 Day13 - 整合測試實作 - 被保人 by Template Driven Forms

昨天幫我們用 Template Driven Forms 所撰寫的被保人表單寫完單元測試之後，今天則是要來為它寫整合測試。大家還記得整合測試的目標是要測什麼...

Leo ‧ 2021-09-28 ‧團隊請支援 Coding

0 Like 1 留言 1857 瀏覽

鐵人賽 Modern Web DAY 12

Angular 深入淺出三十天：表單與測試系列第 12 篇

技術 Angular 深入淺出三十天：表單與測試 Day12 - 單元測試實作 - 被保人 by Template Driven Forms

今天我們要來為我們用 Template Driven Forms 所撰寫的被保人表單寫單元測試，如果還沒有相關程式碼的朋友，趕快前往閱讀第十天的文章： Te...

Leo ‧ 2021-09-27 ‧團隊請支援 Coding

0 Like 2 留言 6182 瀏覽

鐵人賽 Modern Web DAY 11

Angular 深入淺出三十天：表單與測試系列第 11 篇

技術 Angular 深入淺出三十天：表單與測試 Day11 - Reactive Forms 實作 - 動態表單初體驗

今天要來用 Reactive Forms 的方式再來實作一次昨天的表單。具體的規格需求跟昨天差不多，如下所示：被保險人的欄位：姓名（文字輸入框）...

Leo ‧ 2021-09-26 ‧團隊請支援 Coding

0 Like 1 留言 3302 瀏覽

鐵人賽 Modern Web DAY 10

Angular 深入淺出三十天：表單與測試系列第 10 篇

技術 Angular 深入淺出三十天：表單與測試 Day10 - Template Driven Forms 實作 - 動態表單初體驗

今天要來用 Template Driven Forms 的方式實作一個很簡易的動態表單，使用上有點像是保險業者的系統，可以新增多名被保人，也可以編輯與刪除被保...

Leo ‧ 2021-09-25 ‧團隊請支援 Coding

0 Like 2 留言 2212 瀏覽

鐵人賽 Modern Web DAY 9

Angular 深入淺出三十天：表單與測試系列第 9 篇

技術 Angular 深入淺出三十天：表單與測試 Day09 - 整合測試實作 - 登入系統 by Reactive Forms

昨天幫我們用 Reactive Forms 所撰寫的登入系統寫完單元測試之後，今天則是要來為它寫整合測試。再次幫大家複習一下整合測試的測試目標：整合測試...

Leo ‧ 2021-09-24 ‧團隊請支援 Coding

0 Like 3 留言 2872 瀏覽

鐵人賽 Modern Web DAY 8

Angular 深入淺出三十天：表單與測試系列第 8 篇

技術 Angular 深入淺出三十天：表單與測試 Day08 - 單元測試實作 - 登入系統 by Reactive Forms

今天我們要來為我們用 Reactive Forms 所撰寫的登入系統寫單元測試，如果還沒有相關程式碼的朋友，趕快前往閱讀第三天的文章： Reactive Fo...

Leo ‧ 2021-09-23 ‧團隊請支援 Coding

0 Like 1 留言 3170 瀏覽

鐵人賽 Modern Web DAY 7

Angular 深入淺出三十天：表單與測試系列第 7 篇

技術 Angular 深入淺出三十天：表單與測試 Day07 - 整合測試實作 - 登入系統 by Template Driven Forms

昨天幫我們用 Template Driven Forms 所撰寫的登入系統寫完單元測試之後，今天則是要來為它寫整合測試。大家還記得整合測試的目標是要測什麼嗎...

Leo ‧ 2021-09-22 ‧團隊請支援 Coding

0 Like 1 留言 3472 瀏覽

鐵人賽 Modern Web DAY 6

Angular 深入淺出三十天：表單與測試系列第 6 篇

技術 Angular 深入淺出三十天：表單與測試 Day06 - 單元測試實作 - 登入系統 by Template Driven Forms

今天我們要來為我們用 Template Driven Forms 所撰寫的登入系統寫單元測試，如果還沒有相關程式碼的朋友，趕快前往閱讀第二天的文章： Temp...

Leo ‧ 2021-09-21 ‧團隊請支援 Coding

0 Like 1 留言 3225 瀏覽

鐵人賽 Modern Web DAY 5

Angular 深入淺出三十天：表單與測試系列第 5 篇

技術 Angular 深入淺出三十天：表單與測試 Day05 - 如何寫出優秀的測試？

昨天介紹了開始撰寫測試之前必須要知道的二三事之後，想必大家已經對如何開始撰寫測試有了一些概念，但測試不是「有拜有保佑」，有寫就好。所以我們除了要知道如何開始撰...

Leo ‧ 2021-09-20 ‧團隊請支援 Coding

0 Like 1 留言 3912 瀏覽

鐵人賽 Modern Web DAY 4

Angular 深入淺出三十天：表單與測試系列第 4 篇

技術 Angular 深入淺出三十天：表單與測試 Day04 - 開始撰寫測試之前必須要知道的二三事

在開始撰寫測試之前，先帶大家來了解一下 Angular 預設使用的測試框架 ─ Karma 。 Karma 的原名是 Testacular ， Google...

Leo ‧ 2021-09-19 ‧團隊請支援 Coding

0 Like 2 留言 8426 瀏覽

鐵人賽 Modern Web DAY 3

Angular 深入淺出三十天：表單與測試系列第 3 篇

技術 Angular 深入淺出三十天：表單與測試 Day03 - Reactive Forms 實作 - 以登入為例

今天要來用 Reactive Forms 的方式實作一個簡單的登入系統，撇開 UI 不談，具體的功能需求規格跟昨天差不多，如下所示：帳號格式為 Ema...

Leo ‧ 2021-09-18 ‧團隊請支援 Coding

0 Like 1 留言 5218 瀏覽

鐵人賽 Modern Web DAY 2

Angular 深入淺出三十天：表單與測試系列第 2 篇

技術 Angular 深入淺出三十天：表單與測試 Day02 - Template Driven Forms 實作 - 以登入為例

今天要來用 Template Driven Forms 的方式實作一個簡單的登入系統，撇開 UI 不談，具體的功能需求規格如下：帳號格式為 Email...

Leo ‧ 2021-09-17 ‧團隊請支援 Coding