iT邦幫忙

angular相關文章
共有 756 則文章
鐵人賽 自我挑戰組 DAY 29

技術 Angular Stock上市個股日成交(三)(Day29)

今天我們要來使用zingChart的套件產出視覺化的圖表 首先我們先在daily-tranction-stock.component.ts import {...

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 自我挑戰組 DAY 28

技術 Angular Stock上市個股日成交(二)(Day28)

今天我們先讓資料可以顯示在Angular提供的table上面~~ Angular Material: Angular Material is a UI co...

鐵人賽 自我挑戰組 DAY 27

技術 Angular Stock上市個股日成交(一)(Day27)

今天我們要開始實作最後一個頁面了,這個頁面功能是可以顯示上市個股日成交的資訊 還記得我們在Angular視覺化套件(Day19)所引入的ZingChart嗎?...

鐵人賽 自我挑戰組 DAY 30

技術 Day 30:未完待續,不停地學習!

今年,是我第一次參加鐵人賽,而今天也是自我挑戰的達標日,但正如標題所寫的,達標對我而言只是一個階段,不代表結束。 這三十天的挑戰,讓我從一個完全的 Angula...

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 自我挑戰組 DAY 26

技術 Angular Stock首頁(Day26)

今天我們要在首頁設置可以連到上市個股日成交資訊的連結 我們此次是要利用RouterLink這個元件來創造連結 RouterLink: When applie...

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 26

技術 DAY26 - 展現成果,建立 firestore 動態與複雜的查詢

建立動態查詢 還記得之幾篇一開始如何使用條件查詢 firestore 的資料嗎? this.firestore.collection("fruits...

鐵人賽 自我挑戰組 DAY 29

技術 Day 29:開始來學資料繫結:使用目前所學,來個簡單實作吧!(三)

我們前一篇,雖然有將需求二實作出來,但是看到 keyCode 已被淘汰的訊息,還是覺得有點不痛快。 上網搜尋了一下,找到一篇其他開發者分享的文章: [從 0 開...

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 自我挑戰組 DAY 25

技術 Angular Stock登入(四)(Day25)

透過昨天我們提到的路由,今天我們要實現登入後將token存入sessionStorage後轉導到首頁 首先我們先建立一個物件是可以與API回傳物件進行相互對應的...

鐵人賽 Modern Web DAY 25

技術 DAY25 - 展現成果,建立成果頁面

隨著專案前端、後端等等各個架構與部署都準備完成,Side project 就差最後一步驟,將自己或別人辛苦的每日打卡內容展示出來 功能拆解 以卡片式的方式呈...

鐵人賽 自我挑戰組 DAY 28

技術 Day 28:開始來學資料繫結:使用目前所學,來個簡單實作吧!(二)

前一篇,我們完成了需求一: 當使用者在關鍵字搜尋這個 input 輸入文字時,要在輸入框的正下方顯示正在輸入的字元數。 今天我們要接著完成需求二: 當使用...

鐵人賽 自我挑戰組 DAY 27

技術 Day 27:開始來學資料繫結:使用目前所學,來個簡單實作吧!(一)

資料繫結的主題講了好幾天,那麼,就來小試身手一下,透過一個簡單的實作,把這幾天所學到的觀念,試著運用看看。 看看上圖框起來的 input,我們實作的需求如下:...

鐵人賽 自我挑戰組 DAY 24

技術 Angular 路由(Day24)

在完成登入功能之前,我想要先介紹一下Angular的路由系統 Angular Routing: In a single-page app, you chang...

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 自我挑戰組 DAY 23

技術 Angular Stock登入(三)(Day23)

今天我們要來串接我們之前寫好的 使用者登入 的API連結。 昨天我們已經可以在按鈕綁定的doLogin方法上取得輸入的account&password...

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 自我挑戰組 DAY 26

技術 Day 26:開始來學資料繫結:事件繫結(三)今天的 $event 有型別呢!

昨天我們有稍微提到,使用 $event 的 property 時,要注意大小寫的問題,雖然只是輕輕帶過,但是以往有寫過 JavaScript 的開發者,肯定有遇...

鐵人賽 自我挑戰組 DAY 22

技術 Angular Stock登入(二)(Day22)

今天我們要實作如何利用Angular內提供的模組,從form表單取值。 FormModel: Both reactive and template-drive...

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 自我挑戰組 DAY 25

技術 Day 25:開始來學資料繫結:事件繫結(二)使用 $event 參數

前一篇我們談到了事件繫結的方法,在使用 事件繫結(Event binding) 的時候,我們要先有一個事件,並使用 小刮號() 來註冊,並傳入一個方法,而這個方...

鐵人賽 自我挑戰組 DAY 21

技術 Angular Stock登入(一)(Day21)

今天要開始實作登入頁面,首先我們先新增一個login元件 ng generate component login 接著將在網路上找到的登入的html樣式放...

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 自我挑戰組 DAY 24

技術 Day 24:開始來學資料繫結:事件繫結(一)

今天我們要來學習 Angular 第三種資料繫結的方法:事件繫結(Event binding)。 我們要達成的目標是,點擊網頁上的圖片,然後標題會隨之改變。...

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 自我挑戰組 DAY 23

技術 Day 23:開始來學資料繫結:屬性繫結(二)

上一篇談到在 Angular 中使用 屬性繫結(Property binding) 的方法,也延伸了其他議題,就是 Property 及 Attribute 的...

鐵人賽 自我挑戰組 DAY 19

技術 Angular視覺化套件(Day19)

當我們初步了解Angular的框架後,接著我要介紹一套視覺化套件-ZingChart ZingChart is a self-contained, depen...