才開始就結束了 這次挑戰 Angular 是為了讓自己在新工作要學習這個框架，所以才決定透過鐵人賽的方式來挑戰，只可惜在開賽當天就離開了這間公司，重新找尋新的...
Angular 本身對於 form 表單有強大的支援功能，透過響應式表單，可以自訂要驗證的內容寫在 TS 中，讓 HTML 標籤看起來是比較乾淨的。 有兩個表...
表單驗證在許多網頁中很常使用到，只要有需要輸入資料的地方，就會有表單，而 Angular 本身就帶有表單驗證的內建函式庫，這次就從比較好入手的範本表單驗證做個...
根據區域設定規則格式化日期值，在 JS 原本寫日期有點瑣碎，但透過這個 datePipe 讓日期變得更簡單，而且還可以無痛轉換地區，真是太棒了。 {{ val...
percent 百分比 把數字轉換成百分比字串， {{ value_expression | percent [ : digitsInfo [ : local...
currency 貨幣 把數字轉換成金額字串的格式，使用方法如下： {{ value_expression | currency [ : currencyCo...
DecimalPipe 小數點 把數字轉換成字串， 根據本地化規則進行格式化，這些規則會決定分組大小和分組分隔符、小數點字元以及其它與本地化環境有關的配置項。...
Pipe，是在 Angular 中的一個好用的功能，其使用是在 template 使用，加上 | 這個符號，後面放上其函式，就可以直接使用並渲染於網頁上。...
先前有寫過一篇用 JavaScript 寫一個電子鐘 這次要用 Angular 做一個電子鐘，要有日期跟時間，並且時間會一秒跳一次。 練習重點 取到目前時間...
什麼是裝飾器 從前面元件的練習可以看到在 app.component.ts 的檔案中會有一個 Component 的裝飾器，代表裝載著這個元件資料夾內對應的路...
屬性型指令有一個特性，就是不會有自己的 Template，但套用此指令會修改元素的外觀或行為，內建有 ngModel、 ngStyle 跟 ngClass 便...
基本認識 預設「元件」就是含有樣板的指令(最常見)，既是 template 也是 component，一般來說提到元件都會先想到 class 類別這個部分。最...
本次練習主題 可收合的側欄選單。 建立 service 共享元件功能。 元件與畫面的分類。 路由與子路由的 SPA 應用。 頁面分類練習 這次練習的過程中...
什麼服務元件 service 元件是可以把共用的行為或程式邏輯放在此元件中，並且透過相依注入的方法，使其他元件可以取用。 建立服務元件 本次範例 本次範例路徑...
SPA - Single Page Application 單頁應用程式網頁，就是透過 Router 技術達成的，最經典的例子就是 Gmail。 設定 Rou...
基礎認識 雙向繫結簡單來說就是內嵌細節與屬性繫結的合體技，寫法為 EX. [(ngModel)]="keyword"，外側為中括號，內側為...
基礎認識 在寫 jQuery 或是原生 JS 的點擊事件會使用下方兩種方式來撰寫點擊事件。 <button class="btn"...
基礎認識 屬性使用中括號包住，並等於一個陳述式，使用引號包住，EX. [屬性]='陳述內容'。 延續內嵌繫結來改寫，將 href 改成屬繫繫結，其值為 url...
基礎認識 使用兩個大括號的語法就稱為內嵌繫結，EX. {{ name }}，屬於單向的繫結，只有將元件中 component 的資料傳送到網頁元素 templ...
Angular 的啟動流程需要依靠一些固定指令。 install 當 CLI 建置好後，要啟動目前專案，要先輸入： npm start 然後這個指令是執行...
簡介 Angular 是 Google 開發出來一款開源 JavaScript 框架，用來開發單一頁面應用程式（single page application...
Tim Hsu
iThome鐵人賽
看影片追技術