iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

Angular - 從零開始 系列

從完全新手學習 Angular 10 的過程,會有基本介紹,元件,指令,透過官方文件的快速上手與英雄指南完成這次的鐵人賽,因本人資質駑鈍,所以每一篇都會是極短篇。

參賽天數 24 天 | 共 25 篇文章 | 22 人訂閱 訂閱系列文 RSS系列文
DAY 11

Angular - 從零開始 - Day11 -元件型指令

基本認識 預設「元件」就是含有樣板的指令(最常見),既是 template 也是 component,一般來說提到元件都會先想到 class 類別這個部分。最...

2020-09-25 ‧ 由 Tim Hsu 分享
DAY 12

Angular - 從零開始 - Day12 - 屬性型指令

屬性型指令有一個特性,就是不會有自己的 Template,但套用此指令會修改元素的外觀或行為,內建有 ngModel、 ngStyle 跟 ngClass 便...

2020-09-26 ‧ 由 Tim Hsu 分享
DAY 13

Angular - 從零開始 - Day13 - 結構型指令 ngIf

會透過指令來新增或刪除 DOM 元素和改變 DOM 結構,例如 ngIf、ngFor 或 ngSwitch 皆可控制 DOM 結構。 ngSwitch 前...

2020-09-27 ‧ 由 Tim Hsu 分享
DAY 14

Angular - 從零開始 - Day14 - 結構型指令 ngSwitch

ngSwitch 也是切換狀態的一種,延續上一篇的例子這次改用 ngSwitch 來改寫。 ngSwitch 起手式 透過保哥寫的套件可以快速產生指令內容,產...

2020-09-28 ‧ 由 Tim Hsu 分享
DAY 15

Angular - 從零開始 - Day15 - 結構型指令 ngFor

ngFor 的功能非常強大,也是使用非常頻繁的指令,時常會透過 API 取得 JSON 資料,並取出所需要顯示在網頁上的資訊。 練習重點 這邊有一支全台雨量的...

2020-09-29 ‧ 由 Tim Hsu 分享
DAY 16

Angular - 從零開始 - Day16 - @injectable 裝飾器與注入 HttpClient 服務元件

什麼是裝飾器 從前面元件的練習可以看到在 app.component.ts 的檔案中會有一個 Component 的裝飾器,代表裝載著這個元件資料夾內對應的路...

2020-09-30 ‧ 由 Tim Hsu 分享
DAY 17

Angular - 從零開始 - Day17 - 寫一個時鐘

先前有寫過一篇用 JavaScript 寫一個電子鐘 這次要用 Angular 做一個電子鐘,要有日期跟時間,並且時間會一秒跳一次。 練習重點 取到目前時間...

2020-10-01 ‧ 由 Tim Hsu 分享
DAY 18

Angular - 從零開始 - Day18 - Pipe 管線元件:Uppercase 與 Lowercase

Pipe,是在 Angular 中的一個好用的功能,其使用是在 template 使用,加上 | 這個符號,後面放上其函式,就可以直接使用並渲染於網頁上。...

2020-10-02 ‧ 由 Tim Hsu 分享
DAY 19

Angular - 從零開始 - Day19 - Pipe 管線元件:DecimalPipe

DecimalPipe 小數點 把數字轉換成字串, 根據本地化規則進行格式化,這些規則會決定分組大小和分組分隔符、小數點字元以及其它與本地化環境有關的配置項。...

2020-10-03 ‧ 由 Tim Hsu 分享
DAY 20

Angular - 從零開始 - Day20 - Pipe 管線元件:currency

currency 貨幣 把數字轉換成金額字串的格式,使用方法如下: {{ value_expression | currency [ : currencyCo...

2020-10-04 ‧ 由 Tim Hsu 分享