Angular i18n可做到的事 以本地格式顯示日期，數量，百分比和貨幣。 在組件模板中翻譯文字。 翻譯單數和複數 翻譯HTML屬性的替代文字 可以透過CLI來產生XLS檔案，並透過XLS檔案來設定多語系字串，接著使用下面的字串來產生網站檔案： 假如是使用JIT的方式去佈暑網站，則也要在頁面設定LOCALE_ID的值如下： 從上面的範例可以看出，Angular多語系的實作方式是讓每個語言獨立一個 index.html 版本。這樣優點是網站瀏覽較為快速，缺點則是修改時要重新REBULE的工程較大。 此連結有Angular所有支援的語系：Angular repository 在angular5的地區設定是使用BCP47，這個規格隨著時間而有些微改變如下： LOCALE NAME OLD LOCALE ID NEW LOCALE ID Indonesian in id…

設定Router Module 若我們的Router設定較為複雜時，可將Router配置為一個Router Module。 首先，設定一個路由模組app-routing.module.ts 多層的Router Module 我們在做網站時，會希望每個模組專注在自己的功能上，Router也不例外。因此像英雄列表的元件，如果希望點選列表內容，可以進入該英雄詳細資料的頁面如下： 首先，創建一個pre-routing檔案heroes.module.ts 新增一個heroes-routing.module.ts，內容如下： 將Router Module的檔案放在與其伴隨的模組在相同的文件夾中。這兩個heroes-routing.module.ts和heroes.module.ts在同一個src/app/heroes文件夾中。 考慮給每個功能模組自己的路由配置文件。當功能路線很簡單時，看起來可能會過早。但是，路線趨於變得更加複雜，模式的一致性會隨著時間的推移而得到回報。 接著在heroes.module.ts裡導入HeroRoutingModule path: ‘heroes’目前定義在兩個地方：HeroesRoutingModule和AppRoutingModule。 由功能模塊提供的route由Router合併到其導入的模塊的route中。這使您可以繼續定義功能模塊路由，而無需修改主路由配置。 如果不想設定兩次相同的資料，可以把舊的Router設定移除 這邊要注意的是模塊導入順序很重要 當所有的路由都在AppRoutingModule時，我們將通用path: ‘**’符號的設定放在路由/heroes的後面，這樣路由器才有機會匹配一個URL到/heroes路由，而不會先被AppRoutingModule的這個設定匹配走。 如果Routing在兩個不同的模組內，也是要先載入HeroesModule再載入AppRoutingModule，這樣才會使用HeroesModule裡的路由設定而不會因為在AppRoutingModule找到匹配的通用符號而顯示PageNotFoundComponent。 如果將import的順序倒過來，則會顯示PageNotFoundComponent的頁面。 在程式裡去操控路由器 使用this.router.navigate來在程式內操作路由工作…

什麼是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…