前言 程式碼註解對一個有一定複雜度的專案來說是有必要的，除了團隊合作的考量，有時候時間一久，自己可能也會忘記當初的設計理念或需求，導致錯誤理解一個變數，一段代碼...
前言 SCSS 相比於一般的 CSS 有著下列優點， 可變數 可運算 可使用 @mixin/@function 可繼承 @extend 支援巢狀結構 直接匯入...
前言 Angular 搭配 TypeScript 使用，已經能夠在編譯階段檢查出很多問題了，為什麼還要程式碼檢查呢？ 因為 TypeScript 檢查更注重的是...
前言 開發專案前有些事情需要先確認， 使用相同的開發工具 例如要開發Java就使用 Eclipse，C#自然是用 Visual Studio，而當前最多前端...
使用StackBlitz建立範例專案 StackBlitz是一個非常方便的線上編輯器，可線上編輯各種主流框架，完成之後也便於在團隊成員中分享，適合用於製作互動式...
Angular應用基本組成 模組(Modules) Angular的基本構成要素是NgModule。它會把相關的程式碼收集到一些功能集中。Angular應用...
快速開始 安裝 Angular CLI npm install -g @angular/cli 查看是否安裝完成 ng version 查看目前版本的angu...
建立Pipe指令 ng g p yourPipeName 或是在vscode上再要新增的地方右鍵 ng generate選擇@schematics/angul...
大家好，我是 William，這三十天，我想用一個簡單的前後端分離專案，向大家演示專案從開發到部署的流程。 目標與閱讀受眾 DevOps 的精神在於讓跨團隊與不...
特性 以下列出一些主要的特性，提供大家決定是否選用Angular作為開發工具的參考。 由Google開發維護的前端框架，官方文件針對配置與開發方式都有詳細的說...
前言 由於經手的專案中經常有機會使用Angular框架，過程中累積了一些前端專案的開發心得，想在此跟大家做個整理與分享。 本次從一個新專案的檔案結構開始介紹，利...
雖然鐵人賽比完了，但是我依然會把這個專案繼續寫下去，如果還沒看之前Angular Stock的朋友，麻煩幫我點連結進去看。 好，接下來我們遇到一個問題在於說，...
經過前面二十九天的的練習與學習，相信大家應該在表單的實作上都熟悉了不少，只要不是太複雜、太特別的表單應該也都難不倒你們。 今天是本系列文的最後一天，就讓我們來...
今天我們要來使用zingChart的套件產出視覺化的圖表 首先我們先在daily-tranction-stock.component.ts import {...
昨天跟大家分享了自訂表單元件的作法，但昨天的作法只適用於一個欄位、一個 FormControl 。 雖然 FormControl 裡是可以設 {} 的值，但如...
經過了這段時間的練習與學習，相信大家應該越來越能體會 Angular 表單的強大與便利。 不過既然 Angular 表單這麼好用，如果能讓自己做的 Compo...
今天我們先讓資料可以顯示在Angular提供的table上面~~ Angular Material: Angular Material is a UI co...
今天我們要開始實作最後一個頁面了，這個頁面功能是可以顯示上市個股日成交的資訊 還記得我們在Angular視覺化套件(Day19)所引入的ZingChart嗎?...
今年，是我第一次參加鐵人賽，而今天也是自我挑戰的達標日，但正如標題所寫的，達標對我而言只是一個階段，不代表結束。 這三十天的挑戰，讓我從一個完全的 Angula...
今天想要跟大家分享的是跨欄位驗證的小技巧，這個小技巧其實沒有多厲害或多特別，只是可能滿多人剛好不知道原來可以這樣用。 而我們在 Day 23 - Reacti...
今天我們要在首頁設置可以連到上市個股日成交資訊的連結 我們此次是要利用RouterLink這個元件來創造連結 RouterLink: When applie...
之前在開發表單的時候，我們都是使用 Angular 所提供的驗證器來驗證表單欄位裡的值是否符合我們的需求。 雖然 Angular 已經這麼貼心地提供了這麼多驗...
建立動態查詢 還記得之幾篇一開始如何使用條件查詢 firestore 的資料嗎? this.firestore.collection("fruits...
我們前一篇，雖然有將需求二實作出來，但是看到 keyCode 已被淘汰的訊息，還是覺得有點不痛快。 上網搜尋了一下，找到一篇其他開發者分享的文章： [從 0 開...
好一陣子沒寫單元測試與整合測試了，大家是否覺得有些生疏了呢？ 之前的測試都寫得很簡單，正好昨天好好地寫了搜尋輸入框還有呼叫 API ，可以藉由撰寫這個功能的測...
透過昨天我們提到的路由，今天我們要實現登入後將token存入sessionStorage後轉導到首頁 首先我們先建立一個物件是可以與API回傳物件進行相互對應的...
隨著專案前端、後端等等各個架構與部署都準備完成，Side project 就差最後一步驟，將自己或別人辛苦的每日打卡內容展示出來 功能拆解 以卡片式的方式呈...
前一篇，我們完成了需求一： 當使用者在關鍵字搜尋這個 input 輸入文字時，要在輸入框的正下方顯示正在輸入的字元數。 今天我們要接著完成需求二： 當使用...
資料繫結的主題講了好幾天，那麼，就來小試身手一下，透過一個簡單的實作，把這幾天所學到的觀念，試著運用看看。 看看上圖框起來的 input，我們實作的需求如下：...
在完成登入功能之前，我想要先介紹一下Angular的路由系統 Angular Routing: In a single-page app, you chang...
iThome鐵人賽
看影片追技術
看更多
ShawnWu
underrated
孤單威廉
嫩嫩的EveryEnd工程師
Leo
ABow_Chen
tso1158687