iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

Angular - 從零開始 系列

從完全新手學習 Angular 10 的過程,會有基本介紹,元件,指令,透過官方文件的快速上手與英雄指南完成這次的鐵人賽,因本人資質駑鈍,所以每一篇都會是極短篇。

參賽天數 24 天 | 共 25 篇文章 | 11 人訂閱 訂閱系列文 RSS系列文
DAY 1

Angular - 從零開始 - Day1-Angular CLI 安裝與基本認識

簡介 Angular 是 Google 開發出來一款開源 JavaScript 框架,用來開發單一頁面應用程式(single page application...

2020-09-15 ‧ 由 Tim Hsu 分享
DAY 2

Angular - 從零開始 - Day2 -應用程式啟動流程

Angular 的啟動流程需要依靠一些固定指令。 install 當 CLI 建置好後,要啟動目前專案,要先輸入: npm start 然後這個指令是執行...

2020-09-16 ‧ 由 Tim Hsu 分享
DAY 3

Angular - 從零開始 - Day3 -內嵌繫結 Interpolation

基礎認識 使用兩個大括號的語法就稱為內嵌繫結,EX. {{ name }},屬於單向的繫結,只有將元件中 component 的資料傳送到網頁元素 templ...

2020-09-17 ‧ 由 Tim Hsu 分享
DAY 4

Angular - 從零開始 - Day4 -屬性繫結 Property Binding

基礎認識 屬性使用中括號包住,並等於一個陳述式,使用引號包住,EX. [屬性]='陳述內容'。 延續內嵌繫結來改寫,將 href 改成屬繫繫結,其值為 url...

2020-09-18 ‧ 由 Tim Hsu 分享
DAY 5

Angular - 從零開始 - Day5 -事件繫結 Event Binding

基礎認識 在寫 jQuery 或是原生 JS 的點擊事件會使用下方兩種方式來撰寫點擊事件。 <button class="btn"...

2020-09-19 ‧ 由 Tim Hsu 分享
DAY 6

Angular - 從零開始 - Day6 -雙向繫結 Two-way Binding

基礎認識 雙向繫結簡單來說就是內嵌細節與屬性繫結的合體技,寫法為 EX. [(ngModel)]="keyword",外側為中括號,內側為...

2020-09-20 ‧ 由 Tim Hsu 分享
DAY 7

Angular - 從零開始 - Day7 -Router 路由基礎認識

SPA - Single Page Application 單頁應用程式網頁,就是透過 Router 技術達成的,最經典的例子就是 Gmail。 設定 Rou...

2020-09-21 ‧ 由 Tim Hsu 分享
DAY 8

Angular - 從零開始 - Day8 -Service 服務元件的基本認識

什麼服務元件 service 元件是可以把共用的行為或程式邏輯放在此元件中,並且透過相依注入的方法,使其他元件可以取用。 建立服務元件 本次範例 本次範例路徑...

2020-09-22 ‧ 由 Tim Hsu 分享
DAY 9

Angular - 從零開始 - Day9 -實作一個側欄選單與 SPA 頁面

本次練習主題 可收合的側欄選單。 建立 service 共享元件功能。 元件與畫面的分類。 路由與子路由的 SPA 應用。 頁面分類練習 這次練習的過程中...

2020-09-23 ‧ 由 Tim Hsu 分享
DAY 10

Angular - 從零開始 - Day10 -範本參考變數基本認識

範本參考變數 在想命名的變數前面加上一個井字號,命給與自定義名稱,就可以完成,EX. #name,為避免與其他命名的變數相同,建議前面加一個任意英文字,我學習...

2020-09-24 ‧ 由 Tim Hsu 分享