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