iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

關於我作夢變成工程師這檔事(Angular 篇) 系列

常言道:「東漢末年分三國,烽火連天不休...」嗯?怎麼有股很想唱的感覺?總之三國就可以很火了,何況現在競爭激烈的前端框架已不只 VAR 三家了,我肝當然也是火的不得了。

我是在矇矇懂懂的情況下開始使用前端框架的(jQuery都沒玩遛的那種矇懂),一開始就接觸了 Angular 2。記得那時候就是抓著他的新手教程「英雄之旅」猛刷,一直刷一直刷......所以對於這份教程我也是滿有感情的。隨著接觸的案子越多,處理的需求越多樣,更多地應用到 Angular 提供的不同的 api。因此,有了這樣的想法:嘗試寫一份帶有自己思考、涵蓋更多常用功能,並且「有趣」的新手教程(英雄之旅)。

參賽天數 14 天 | 共 14 篇文章 | 12 人訂閱 訂閱系列文 RSS系列文
DAY 1

第 1 天 大閒人降生

前言 常言道:「東漢末年分三國,烽火連天不休...」嗯?怎麼有股很想唱的感覺?總之三國就可以很火了,何況現在競爭激烈的前端框架已不只 VAR 三家了,我肝當然也...

2021-09-16 ‧ 由 tomasysh 分享
DAY 2

第 2 天 諸神早安晨之美|建立 Angular 專案、使用 JSON-server

今天我們將建構專案開發環境,除了 Angular 之外,我們也將在專案中配置 json-server 這個套件,來模擬與後台的互動。 004 哈囉大閒人,妳在忙...

2021-09-17 ‧ 由 tomasysh 分享
DAY 3

第 3 天 「速速前呂布奉先!」|NgModule、HttpClientModule、新增元件

前情提要 在昨天我們建立了 Angular 專案、使用 JSON-server 來製作 mock db,並且建立了英雄資料。今天這篇文章我們將完成下列事項:...

2021-09-18 ‧ 由 tomasysh 分享
DAY 4

第 4 天 英雄有偶包怎麼辦|*ngFor、JsonPipe、Angular Material、Mat-Card、Mat-Button

前情提要 昨天我們已經成功地使用 HttpClient 發送 Http 請求,從 mock db 取得了英雄資料,並將資料列印在 console 裏。今天我們要...

2021-09-19 ‧ 由 tomasysh 分享
DAY 5

第 5 天 還我漂漂拳| property binding、interface

前情提要 將英雄們顯示在 Mat-Card 上後,我們進一步地要對英雄資料做點加工,並且製作英雄詳細介紹頁面。今天會完成下列事項: 使用 TypeScript...

2021-09-20 ‧ 由 tomasysh 分享
DAY 6

第 6 天 調整 HeroDetail 的顯示方式|AppRoutingModule、ActivatedRoute

前情提要 昨天我們完成了英雄細節元件 HeroDetailComponent,並且使用屬性繫結(property binding)的方式來顯示所選取的英雄細節資...

2021-09-21 ‧ 由 tomasysh 分享
DAY 7

第 7 天 讓元件歸元件、服務歸服務|service、@Injectable、AsyncPipe

前情提要 「英雄之旅」已經可以瀏覽完整的英雄列表,並透過路由參數來取得特定的英雄資料,達到換頁瀏覽細節資訊的功能,可以說,我們初步完成了英雄的資料查詢。在我們進...

2021-09-22 ‧ 由 tomasysh 分享
DAY 8

第 8 天 邁出 RxJS 小小的一步|pipe、operators

前情提要 使用了 AsyncPipe 管道來取得所有英雄資料後,我們要在英雄資訊頁面,傳遞參數來取得特定的英雄資料。在先前撰寫的程式碼中,我們知道如何透過 Ac...

2021-09-23 ‧ 由 tomasysh 分享
DAY 9

第 9 天 元件還是頁面,這是個問題|page、component

前情提要 藉著重構原先從元件取得資料的方法,我們將對 http 的呼叫封裝在服務裡,隱藏了資料來源的細節。這使我們在元件中在可以更專注於與畫面的互動。並且,如果...

2021-09-24 ‧ 由 tomasysh 分享
DAY 10

第 10 天 別說呂布了,你聽過青銅五小強嗎 |Template-driven-form、ngModel、Template variables

前情提要 昨日我們聊了一些關於「頁面」與「元件」在規劃上,可能需要注意的地方。今天,我們會實際帶著「頁面還是元件」這樣的問題意識,來實作新增英雄表單功能,在表單...

2021-09-25 ‧ 由 tomasysh 分享