Lifecycle Hooks 一個組件有一個由Angular管理的生命週期。 Angular創建、產生元件，當元件的數據綁定屬性改變時做檢查並確認，並在元件從DOM中刪除它之前destroys掉該元件。 Angular提供lifecycle hooks，可以讓我們在各個階段加上我們要讓元件做的事情。 directive具有相同的lifecycle hooks。 如何使用Lifecycle Hooks 下面為一個使用範例 Lifecycle sequence 鉤 目的和時機 ngOnChanges() Angular設置數據綁定的輸入屬性。該方法接收SimpleChanges當前和以前的屬性值的對象。 會在ngOnInit()之前被呼叫 ngOnInit() 在Angular之後初始化指令/組件首先顯示數據綁定屬性並設置指令/組件的輸入屬性。 ngDoCheck() 檢測Angular無法或無法自行檢測到的更改並採取相應措施。 ngAfterContentInit() 在Angular將外部內容設置到template之後被呼叫。  …

Template Syntax 在上一篇的Angular架構中有提到，透過模版語法，template可以與component做許多的溝通。 那這一篇就會介紹Angular內建的模版語法參考。 對於tempalte.html來說，所有的html標籤都可以使用，除了<script>以外，這是為了維護模版的安全性，去除template被攻擊的風險，因此在template中所有的<script>會被忽略，並跳出警告。 接下來我們來介紹所有Angular的模板語法 {{…}} 以下為一個範例 大括號之間值通常是組件屬性的名稱。Angular使用相應組件屬性的字符串值替換該名稱。 在上面的例子中，Angular會取元件裡title和heroImageUrl的屬性，並會取代{{title}}及{{heroImageUrl}}，因此在頁面上會顯示一個大的應用程序標題，然後一個英雄影像的位置。 在{{…}}之間，我們也可以使用模板表達式去轉換要顯示的值。 例如在刮弧中做運算： 或者也可以呼叫component的function getVal()： 大多的運算符都可以用在表達式裡面，除了一些會影響到component的值的運算符，如=、+=、-=之類。 有時候{{…}}裡面要綁定的數值也可以是在template定義的(使用#符號)，請見下面的範例 「註」：如果在元件裡已經有變數名稱叫做hero，而template裡又有一個hero，在template會優先使用template內定義的變數。 在表達式中不能引用任何除了undefined外的全域變數，如window或document，也不能用consolo.log，只能使用元件內的屬性或方法，或者template裡上下文內的成員 在使用{{…}}時，有下面四個原則要注意： No visible side effects：不應該改變任何元件內的值，在rendering整個表式示時應該是穩定的 Quick execution：表達式的運算應該要很快，因為它會在許多狀況下被呼叫，因此若是裡面含有許多複雜運算時，請考慮用快取以增加效能。…

Angular是一個框架，用來編寫html的應用程式，可以用javascript或typescript去編寫。 下圖是官網上所繪製的Angular架構圖： 首先先看最中間那一塊，是由template、metadata、component所構成的，這三個是一個component必備的元素。 所謂的元件可以看之前創建hero那篇文章，我們可以用下面指令創一個元件 創完一個元件後，可以看見下面這些檔案 Templates 裡面的component.html檔就是template，它看起來像是一個html的檔案，可以在裡面用資料綁定與事件綁定與controller裡的物件做繫結。 下面是一個template的範例： 可以注意到上面有些地方與一般的html不相同，例如像是*ngFor、{{hero.name}}、(click)=”selectHero(hero)”等… 這就是架構圖畫面上用來連繫Component以及Template的兩個箭頭，property binding以及event binding。 例如click事件繫結是(click)=’functionName()’，物件繫結可以用{{data}}）。 透過這樣的繫結可以讓template將使用者操作的事件傳給component，component也可以將資料的更動即時的反饋到template所顯示的資料上。 下圖是非常清楚的binding類型列圖 其中{{hero.name}}為值繫結，可以綁定component裡的值。 [hero]=”selectedHero”為property binding，可以將某個元件裡的變數塞進一個HTML元素的屬性裡。。 (click)=”selectHero(hero)” event binding可以呼叫component裡的function 這個則是雙向數據綁定，在雙向綁定中，與屬性綁定一樣，數據屬性值將從組件輸入到輸入框中。用戶的更改也會返回到組件，將屬性重置為最新值，就像事件綁定一樣。 數據綁定在模板及其組件之間的通信中起著重要的作用。 數據綁定對於父組件和子組件之間的通信也很重要。 Component…

Angular處理http是使用rx（Reactive Programming）來實作的，類別的名稱為rxjs 在閱讀此篇之前，建議可以了解一下何謂Reactive Programming，其核心概念為何，這樣會比較容易理解本篇的內容 推薦閱讀：Reactive Programming 簡介與教學(以 RxJS 為例)、官網 ReactiveX RxJS教學：30 天精通 RxJS 使用http來取得api資料 將src/app/hero.service.ts取得資料的方式改由API取得 上面程式碼註解地方代表有修改過的地方。 所有的HttpClient方法都返回一個Observable的物件。一般來說，Observable物件會傳送多次資料給接收者，但http.get所取得的值為例外，因為http方法是發出要求並收到回應後就不會再有動作，因此它只會傳一次資料給取得這個資料的接收者。並且需要在被subscribe後才會啟動動作。 http.get預設接收的格式為json，會自動對照所取得的json轉化成一個對應屬性的物件以方便取得資料。 處理錯誤 如果在取得api時發生網路錯誤或其他問題導致無法順利取得伺服器資料時，可以用下面的方法來偵聽錯誤 首先，導入rxjs/operators類別 接著，使用pipe方法擴展Observable並在裡面下達catchError()來處理錯誤的狀況 下面則是catchError的內容 在上面的T是類型參數，在這個例子中，T代表Hero[]。這可以讓程式在打api失敗時依舊可取得符合應用程式所期望的類型的回傳值。 使用http修改伺服器資料…

什麼是Routing? Routing意指路由器，也就是由一個路由器來決定現在要顯示的頁面是什麼 在套用Routing時，會有下列的實踐流程 1. 套用轉址設定（讓伺服器不去真正網址所在的位置去讀取資料，而改由Routing來決定現在要顯示什麼畫面） 2. 由url分析要顯示的狀態是什麼 3. 由狀態去獲得真正要取得那些資訊 4. 從這些資訊組成實體 5. 套用導覽動作，由這個畫面切換至另一個畫面 在Angular裡，最佳做法是將載入和設定Routing放在一個top-level的模組內，並於AppModule內來import所有的路由資訊。 按照慣例，模組AppRoutingModule和app-routing.module.ts會放在src/app裡 Angular的Routing 產生的虛擬 URL，並不是真的存在於檔案系統裡，因此需要伺服器能夠支援，否則重新整理時會出現404 not found。 新增AppRoutingModule 透過下列CLI的指令來新增一個Routing –flat 的意思是將產出文件放在src/app裡，而非自己一個資料夾 –module=app…

這邊是上一篇Angular的主從元件開發的範例檔案：按此下載 創建 HeroService 使用Angular CLI創建一個名為hero的服務 我們會看到在src/app下多出了兩個檔案：hero.service.spec.ts和hero.service.ts 打開src/app/hero.service.ts可以看到下面內容 注意到我們用@Injectable() 來宣告HeroService這個類別，代表這個類別可能本身有依賴注入，對Service來說是強烈建議要加上這個宣告 將HeroService提供給app使用 Service可以供appModule、或任何Component使用，如果要給appModule使用， 則需在src/app/app.module.ts的@NgModule裡加入 這邊有更多NgModule的說明：NgModule 另外，若要使用CLI來自動完成providers的設定，則可以用下面的指令 修改HeroesComponent去使用HeroService裡的資料 打開src/app/heroes/heroes.component.ts，修改成以下的內容 讓getHeroes被更動時能夠被通知 Observable是RxJS library中很重要的一個功能。 當我們在src/app/hero.service.ts的getHeroes方法回傳值前面加上Observable宣告，當service內的資料變動時，其他注入的內容也會同步被異動 首先要先import下面兩個檔案 然後在getHeroes的回傳直類型前加上Observable宣告 注：若使用HttpClient.get<Hero[]>()亦會傳回Observable<Hero[]>，只是內容是由http傳來 在接收Observable物件時的方法也與非Observable物件的方式不同，過去若非Observable物件時，在hero.component.ts裡的getHeroes函數如下 若要使用Observable宣告則須改為：…

創立hero-detail元件 在前一篇新手教程3-使用angular的迴圈及判斷式等功能裡，我們在顯示selectedHero的資訊時是與列表寫在同一個頁面 但如果顯示詳細資訊的地方有需要額外拆分出來，可以在創立一個元件，並將selectedHero傳入元件 寫入hero-detail的內容 開啟檔案src/app/hero-detail/hero-detail.component.html，這邊會將selectedHero的名稱改為hero 讓元件能接受外部傳送物件進來 開啟src/app/hero-detail/hero-detail.component.ts 在hero-detail.component.ts裡面，hero一定要以@Input來宣告這個物件 而在HeroesComponent裡，則會以下面的宣告來將hero的值傳入 現在我們打開heroes.component.html，修改後的網頁內容會如下 今日練習的範例連結：live example / download example

延續上一篇的範例: 請按此下載. 利用*ngFor來做迴圈顯示完整列表 首先開啟src/app/heroes/heroes.component.ts 設定一個變數heroes 接著開啟app.component.html，利用*ngFor來迴圈式的顯示列表內容 這時網頁上就可以看到成果如下圖: 更多資訊有關於ngFor 使用(click)來設定觸發事件 開啟src/app/heroes/heroes.component.ts，在li裡面增加click的事件 在src/app/heroes/heroes.component.ts增加處理的函數 更多資訊有關於event-binding 以條件式去增加元件的類別 打開heroes.component.html，在li內增加 [class.要增加的類別名稱]=”條件式為true時增加” 這樣當hero === selectedHero為真時，這個li就會被加上selected這個類別 接下來再到src/app/heroes/heroes.component.css設定該類別的CSS，就能突顯現在所選擇的是那一個了 .selected{ color:red; }

使用CLI來為專案建立一個元件 用這個指令，CLI會為我們初始化一個新的元件樣版 這時我們開啟app/heroes/heroes.component.ts 只要創建元件，都必需從Angular去import Component。 而@Component則是用來定義這一個元件的相關資訊，有三個metadata selector: the components CSS element selector以及在HTML裡要宣告的TAG名稱 templateUrl: 要使用的HTML樣版位置 styleUrls: 專為這個元件設定的CSS 要注意的是，我們通常會使用export class，以方便在其他的模組裡可以import來使用 修改元件內容 打開heroes.component.ts 修改heroes.component.html，使用{{hero}}來顯示剛剛在TS檔裡定義的變數 將元件放進頁面裡 打開src/app/app.component.html 這時候就可以在頁面中看到剛剛我們所增加的內容 使用物件 創建一個Hero物件…

這系列的文章為我在官網學習Angular 5時所紀錄下來的學習筆記。 原文的原始教程都可在Angular的Docs看到。 這三十天的筆記大綱預計分為新手教程、功能介紹、技術支援三個部份： 新手教程：一個最簡單的專案，用step by step的方式引導大家去做 功能介紹：一個個介紹Angular裡面各別的功能和特性 技術支援：涵蓋如何佈署、設定以及angular所使用的npm、typescript等的設定 建立專案 確認電腦已有安裝NodeJS(6.9.x以上版本)以及NPM(3.x.x以上版本) 創建專案 ng new my-app 開啟專案 cd my-app ng serve –open 編輯第一個自己的頁面 打開src/app/app.component.ts，改為 import {…