什麼是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。 設定base href Router使用history.pushState來進行導航。靠著pushState，可以讓瀏覽器網頁路徑看起來像是更換真實的網址。因此Angular APP內的網址可能與伺服器的網址無法區分。 我們需要添加元素到index.html讓pushState路由能夠生效。當引用CSS或JS檔案時應用base…

使用HttpClientModule 官方文件：https://angular.io/api/common/http/HttpClientModule 下面是一個簡單的使用範例，假使我們要讀取這樣格式的JSON資料： this.results即為一個含有[“item1″,”item2”]的陣列 定義回傳格式 首先先建立一個要回傳的物件介面 在get後面設定要回傳時可取得的物件或介面 取得完整的HTTP Response 很多時候我們也會需要Http header的資料，而不光是回傳的body，這時候可以更改observe的值為response 處理錯誤訊息 可以在.subscribe()下面增加err函數來處理HTTP錯誤的狀況 err這個含數可以有傳入更詳細的HTTP錯誤訊息物件HttpErrorResponse 遇到錯誤時自動重試 RxJS有一個有用的運算符.retry()，可以在遇到錯誤時自動重新嘗試，使用範例如下： 先導入需要的類別 使用的方式就是直接.retry()並傳入重試次數 接收非JSON格式的資料 傳入responseType可以設定預期會接收到的資料格式，angular預設值是json，如果是其他格式則需要設定這個欄位。 可接受的項目有『arraybuffer』、『blob』、『json』、『text』。 下面是使用方式： 發送POST請求 下面是發送POST請求的範例： 所有rxjs的動作都會在有人subscribe後才會呼叫，因此如果忽略subscribe()，http將不會做任何動作。…

何謂依賴注入 什麼是依賴注入呢？可以參考這篇文章：理解 Dependency Injection 實作原理 Service的DI 以下為一個service的範例 @Injectable()是angular的service使用做依賴注入的裝飾詞，可以使Service成為可被注入的元件。 當我們在provider設定這個服務給這個module使用，如下： 這個service會變成是Singleton的，我們可以在許多的地方去從constructor直接宣告這個服務，在所有地方所取得的都會是同一個實體。 component的provider 在ngModule裡provider設定的服務可以在該模組下任一元件裡去從建構子取得同一個物件的實體而不需要再在元件中額外去在provider宣告。 如果有一個服務只需要在某個元件下被使用，則可以直接在@Component.providers裡面註冊服務。 組件注入器是相互獨立的，每個組件都創建它自己的組件提供服務的實例。 當Angular銷毀其中一個組件實體時，它也會銷毀組件的注入器和注入器的服務實體。 讓建立的類別與providers宣告的不同 當angular在注入這個服務時，會用下面這行來取得實體 在這個例子中，Logger就是angular在做這個服務依賴注入的token，也可以寫成下面這樣。 上面是token與實際物件實體類型相同的狀況。 但是有的時候，或許某一個元件寫好需注入的服務是Logger。 但因為在現有的模組中我們建立了一個繼承Logger並覆寫其部份功能的類別BetterLogger。 這時候可以用這個方式讓angular裡的token與實際產生的物件實體是不同的 Aliased class providers…

Angular modularity Angular有提供許多的功能，如FormsModule、HttpModule、RouterModule，都是NgModules。一些第三方資源提供者也有提供許多NgModules可使用，如Material Design、Ionic、AngularFire2等…。 NgModules可將一群功能性一致的components、directives和pipes組合在一起，讓外部可以直接引用並使用這個模組。例如FormsModule裡面會提供許多和表單驗證、表單資料繫結等的功能在裡面。 在要開發一個APP時，我們可以透過@NgModule的metadata去設定這一個APP會使用到的功能模組，設定的樣子如下： （以src/app/app.module.ts為例） NgModule的metadata有下面幾項： imports：這個模組所需用到的Angular提供的或第三方提供的Angular資源庫（如FormsModule、HttpModule等）。 providers：一些供這個模組使用的service，在此宣告後所有下面的元件都可以直接使用這個服務。 declarations：這個Module內部Components/Directives/Pipes的列表，聲明這個Module的內部成員 exports：用來控制將哪些內部成員暴露給外部使用。 bootstrap：這個屬性只有根模組需要設定，在此設定在一開始要進入的模組成員是那一個。 關於這整個Angular NgModule的介紹也可參考系列文的：[功能介紹-8] Angular架構，會有更概觀的介紹。 Bootstrapping 每一個專案都一定會有一個根模組，也就是root module，我們會在main.ts去做Bootstrap這個根模組的動作，讓整個APP可以運行起來。 在bootstrap的動作裡，會建立好執行環境並把在src/app/app.module.ts裡設定的bootstrap陣列裡的元素取出來並透過在該成員裡設定的selector，讓我們可以在src/index.html來顯示這個元件的VIEW。 為APP增加一個自製的directive 下面是一個highlight的範例的directive src/app/highlight.directive.ts 如果想使用這個自定的directive，可以在src/app/app.module.ts的declarations區塊裡增加這一個Directive 使用CLI加速開發速度…

Template-Driven Forms與Model-Driven Forms的比較 Reactive forms Reactive forms的驗證大多是直接寫在controller裡的，會是一個明確的、非UI的data flowing。 Reactive forms的reactive patterns可以讓測試與驗證更加簡單。 使用Reactive forms可以用一個樹狀的控制物件來binding到表單template的元件上，這讓所有驗證的程式碼都集中在一起，方便維護與管理，在撰寫單元測試時也會較為容易。 使用Model-Driven Forms也較符合reactive programming的概念（延伸閱讀：Functional Reactive Programming 的入門心得） Template-driven forms Template-driven forms是將組件驗證控制的功能寫在像是<input>或<select>的標籤內，並利用ngModel來確認是否輸入了合法的內容。 使用表單驅動驗證不需要自己創建control objects，因為angular已經為我們建好了。…

使用Event由template表單傳送資料給Component 利用事件的$event去傳送相關資訊給component <input (keyup)="onKey($event)"> <p>{{values}}</p> 接收則可以透過event.target去存取該htmlInputElement的資料（詳細資料請見此） 下面的範例能將value存至一個變數內且顯示在頁面上： export class KeyUpComponent_v1 { values = ”; onKey(event: any) { // without type info this.values += event.target.value +…

Pipes有那些？ 常用的Pipes有DatePipe，UpperCasePipe，LowerCasePipe，CurrencyPipe，和PercentPipe。它們都可用於任何模板。 下面是angular內建所有的的Pipes說明：  AsyncPipe：給Observable或Promise返回已發出的最新值  CurrencyPipe：格式化數字為錢幣格式  DatePipe：格式化一串日期文字  DecimalPipe：格式化小數點  DeprecatedCurrencyPipe：Use currency to format a number as currency.  DeprecatedDatePipe  DeprecatedDecimalPipe  DeprecatedPercentPipe  I18nPluralPipe：Maps a value to a string that…

什麼是結構指令 結構指令負責HTML佈局。他們通常通過添加，刪除或操縱元素來塑造或重塑DOM的結構。結構指令很容易識別。通常會有星號(*)在指令屬性名稱前面。 以下是三種常件的結構指令的範例 <div *ngIf="hero" >{{hero.name}}</div> <ul> <li *ngFor="let hero of heroes">{{hero.name}}</li> </ul> <!–hero?.emotion指的是hero.emotion，?代表如果hero為空時不會因此引發null reference exception–> <div &#91;ngSwitch&#93;="hero?.emotion"> <app-happy-hero *ngSwitchCase="’happy’" &#91;hero&#93;="hero"></app-happy-hero> <app-sad-hero *ngSwitchCase="’sad’" &#91;hero&#93;="hero"></app-sad-hero> <app-confused-hero…

Directive有分為結構型和屬性型的，這一篇要先介紹屬性型的Directive。 本篇的範例請見：Attribute Directive example / download example Angular有三種directive： 元件 – 包含template的directive。 結構指令 – 通過添加和刪除DOM元素來更改DOM佈局。(如ngFor、ngIf) 屬性指令 – 改變元素，組件或其他指令的外觀或行為。(如ngStyle) 建立一個簡單的屬性型directive 一個directive最少需要一個帶有@Directive宣告的檔案，告訴angular該如何識別這個directive。 這邊會用一個high light的directive範例來解說，當用戶將鼠標懸停在該元素上時，設置元素的背景色。你可以像這樣應用它： <p appHighlight>Highlight me!</p> 而下面會一步步創立這一個directive。 首先，用cli創立一個新的directive ng…

模版組件有的時後會需要能夠動態被載入，在這邊會講要如何利用ComponentFactoryResolver來動態加入組件 本篇的例子是需要動態載入廣告橫幅，因為廣告內容會由幾個不同的團隊來打造，要在同一個區塊循環播放不同的廣告，因此較難把不同的廣告放在同一個component，這時後就會需要用到動態載入的功能 完整範例請見： live example / download example The anchor directive 在架構介紹的地方有介紹到，directive是一個沒有view的component，可以使用在html裡。 在這邊因為需要動態載入元件，會需要先建立一個directive，讓angular知道要把要動態載入的元件放在那邊。 ad.directive.ts這個檔案的內容如下： import { Directive, ViewContainerRef } from ‘@angular/core’; @Directive({ selector: ‘[ad-host]’,//這個directive的名字 }) export class AdDirective…