在前十天，建立起前端專案的基本架構，接下來進入後端的世界，建立後端的基礎，之後與前端專案對接。 什麼是 firebase firebase 是 google...
由於在未來的專案有機會使用到 Bootstrap，所以就藉這個機會來介紹一下如何在 Angular 環境裡使用 Bootstrap。 安裝 Bootstrap...
前情提要 昨日實作其中一個英雄表單欄位「姓名」後，演示了如何使用 FormControl 表單控制項搭配範本參考變數（Template Reference）來掌...
昨天我們的 Component 只有簡簡單單的一行 “ironman works!” 其他啥都沒有。今天，我們就來替他加點東西，讓它顯示資料。首先我們先在 ir...
上一篇中介紹了如何使用 FormControl 建立單個表單控制元件，也介紹了如何使用 FormGroup 將多個相關控制元件分組到單個輸入表單中，可以讓複雜的...
今天要來用 Reactive Forms 的方式再來實作一次昨天的表單。 具體的規格需求跟昨天差不多，如下所示： 被保險人的欄位： 姓名（文字輸入框）...
前情提要 昨日我們聊了一些關於「頁面」與「元件」在規劃上，可能需要注意的地方。今天，我們會實際帶著「頁面還是元件」這樣的問題意識，來實作新增英雄表單功能，在表單...
在前幾篇，挑選一套自己喜歡的UI框架中提到，挑選Nebular的其中一個重要的原因是:可以很方便快速切換主題。這一篇就要來示範，如何做到一件切換主題! 什麼是切...
上一篇中介紹完 Template-driven forms 後，接著再介紹 Angular 的另一種 form，那就是 Reactive forms，它提供了一...
今天要來用 Template Driven Forms 的方式實作一個很簡易的動態表單，使用上有點像是保險業者的系統，可以新增多名被保人，也可以編輯與刪除被保...
把靜態檔案加到 Angular 專案中 前一篇，我們已經學會用 Angular CLI 建立元件及範本，今天我們要試著把靜態檔案加到 Angular CLI 所...
前情提要 藉著重構原先從元件取得資料的方法，我們將對 http 的呼叫封裝在服務裡，隱藏了資料來源的細節。這使我們在元件中在可以更專注於與畫面的互動。並且，如果...
讓 Angular 元件顯示在畫面上 上一篇，我們建立了一個元件 page1。 接下來，我們就要把 page1 這個元件，顯示在如下圖的 Angular 應...
好的，今天開始我們就要用牛刀來殺雞。首先第一件事當然就是先準備牛刀，不過這個牛刀整支都在 npm 上，所以拿牛刀之前我們還需要先裝 Node.js。請直接透過傳...
在上一篇中提到了 Angular 中的兩種不同的 Form，介紹了他們在使用上以及細節上的不同，接著在本篇中將會著重介紹 Template-driven for...
昨天幫我們用 Reactive Forms 所撰寫的登入系統寫完單元測試之後，今天則是要來為它寫整合測試。 再次幫大家複習一下整合測試的測試目標： 整合測試...
快速產生 Angular 元件 要在 Angular 專案中快速產生元件，首先要先打開 VS Code 的終端機面板，並輸入以下指令： ng generate...
前情提要 使用了 AsyncPipe 管道來取得所有英雄資料後，我們要在英雄資訊頁面，傳遞參數來取得特定的英雄資料。在先前撰寫的程式碼中，我們知道如何透過 Ac...
呼~~終於寫完所有躲在瀏覽器後面的東西了，現在我們已經架好了主機、佈好了 API 程式、裝好了 MySQL，就只差前端頁面了。從今天開始，我們就要開始一步一步做...
從本章開始會進入 Angular Form 的部分，在現代網頁中與使用者互動的過程變得越來越重要，其中最主要的便是 Form，從一開始的登陸頁面到對商品或對網頁...
今天我們要來為我們用 Reactive Forms 所撰寫的登入系統寫單元測試，如果還沒有相關程式碼的朋友，趕快前往閱讀第三天的文章： Reactive Fo...
一個網站要吸引人，除了要有適當的排版，還要有吸引人的文字與豐富的動畫，讓人的目光不由自主地佇足想要瀏覽。 首頁可以說是一個網站的門面，好的首頁會讓人想要繼續看下...
前情提要 「英雄之旅」已經可以瀏覽完整的英雄列表，並透過路由參數來取得特定的英雄資料，達到換頁瀏覽細節資訊的功能，可以說，我們初步完成了英雄的資料查詢。在我們進...
前一篇我們提到了一部分的啟動流程，今天我們會探討剩下的啟動流程資訊。 首先，我們要先知道 JavaScript 是從哪一個程式開始跑，而 Angular 應用程...
在上一篇中介紹了如何透過 router 傳遞參數，也介紹了怎麼建立嵌套的 route 等等，在本篇中要繼續介紹 Angular route 的其他好用的用法與功...
昨天幫我們用 Template Driven Forms 所撰寫的登入系統寫完單元測試之後，今天則是要來為它寫整合測試。 大家還記得整合測試的目標是要測什麼嗎...
上一篇提到 Nebular 的其中一個缺點就是 沒有格線系統 ，需要另外安裝套件或是自行設計。 這是一個缺點，但並非致命的缺點，不可克服或解決。 以下是兩個解決...
上一張介紹完什麼是 router 與他的基本用法之後，接著要來繼續介紹 Angular router 的其他一些比較詳細的細節與用法，那就接著看下去吧！ W...
前情提要 昨天我們完成了英雄細節元件 HeroDetailComponent，並且使用屬性繫結（property binding）的方式來顯示所選取的英雄細節資...
啟動 Angular 開發伺服器 我們先打開 VS Code 的終端機面版，輸入 npm start，而 npm start 就會執行 ng serve 這個指...
tso1158687
ABow_Chen
tomasysh
goattl
Fandix
Leo
iThome鐵人賽
看影片追技術