Claire's Blog

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 Hebrew iw he Romanian Moldova mo ro-MD Norwegian Bokmål no, no-NO nb Serbian Latin sh…

設定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來在程式內操作路由工作 若需要傳一個參數，則可以用 要傳送兩個參數則如下 點下後出現的連結如下 這個叫做Matrix URL，在URL查詢字符串中，用分號隔開“;” 不同的參數，而不是用& 取得Router的參數 添加換頁效果 首先要載入BrowserAnimationsModule這個動態效果模組。 animations.ts在根src/app/文件夾中創建一個文件。內容如下所示： 然後在src/app/heroes/hero-detail.component.ts增加使用這個動態效果的綁定 Child routing component 子路由元件與直接使用參數去定義路由，Router預設的狀況下，若瀏覽器重新導航到相同的元件時，會重新使用該元件既有的實體，而不會重新創建。因此在物件被重用的狀況下，該元件的ngOnInit只會被呼叫一次，即使是要顯示不同的內容資料。…

什麼是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 href的值來設定相對URL路徑。 在src/index.html檔案裡增加下面的文字： 應被放置在在標籤的後面。不論是不是位於根目錄，都需要設置這個項目。 像是Plunker不會有固定的網站基準位置，這時可以用動態設定base path如下: 使用Routing 在src/app/app.module.ts導入RouterModule及Routes 在一個Angular的應用程式中只會有一個Routing，當瀏覽器的URL更改時，router會尋找Route裡確認要顯示的組件及畫面。 要使用Route，要將Router透過RouterModule.forRoot做配置並且將添加到AppModule的imports陣列 以下為src/app/app.module.ts的部份內容： Routing就是使用這個方法，因此可以傳參數進去並且比所有其他的元件更早載入以決定現在所要顯示的頁面。 放置Router Router會根據網址決定要顯示那個元件的VIEW，所以需要設定一個區塊來顯示要被插入的VIEW，我們可以插入下面這段文字 設定Router規則 如果要設定一個連至我們設定的位置的超連結，可參考下面的寫法…

使用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將不會做任何動作。 設置request的header 該HttpHeaders的內容是不變的，每次set()時會返回一個新的實體，並套用所設定的更改。 設置URL參數 如果想要發送請求至/api/items/add?id=3，可以用以下的寫法

何謂依賴注入 什麼是依賴注入呢？可以參考這篇文章：理解 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 以上面的例子，如果我們在根模組設定Logger為token，實際創建的物件為BetterLogger，會造成其他的子元件也都無法直接在constructor取得BetterLogger這類型的物件。 因此在這樣的狀況下，可以為這個服務取別名，下面這個是錯誤示範，因為事實上這樣的寫法會創建兩個不同的BetterLogger實體： 真正正確的寫法如下： 在provide提供現成的物件實體 有的時候我們會希望能夠直接使用一個已建立好的物件實體，可以用下面的方式： 下面的宣告方式，可以讓我們在元件下的建構子可以直接使用Logger來取得上面所建的物件實體 在provide服務時使用工廠模式 如果我們希望針對客戶的層級不同提供不同的服務，可以使用Factory providers。 下面是src/app/heroes/hero.service.ts這個檔案的截錄內容 hero.service.provider.ts裡定義了factory的物件 然後在providers的宣告是這樣的 useFactory可讓angular知道provider是一個工廠函數，其實現是heroServiceFactory。 而deps屬性是這個工廠需要用到的服務。angular會將服務中的Logger和UserService注入符合的Factory function參數。…

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加速開發速度 這邊是Angular CLI的官網：https://cli.angular.io/ 這邊有很詳細的Angular CLI的教學：https://dotblogs.com.tw/wellwind/2016/09/30/angular2-angular-cli 直接使用也可以看到CLI的詳細說明 如果我們使用CLI來創建這個component, directive或pipe，CLI會自動將這個directive宣告在app.module.ts的metadata裡 可以讓我們在開發上更為加速 下圖是ng generate可以帶的參數 Service providers 一個service可以注入至組件(@NgModule.providers)或者是元件(@Component.providers)。 如果NgModule與Component同時有分別設定相同的類別，會產生兩個不同的實體，在該元件內則會優先注入使用元件裡自己設定的服務。 一般而言，如果這個服務被廣泛的使用在很多的元件裡，我們會將providers宣告在根模組上。但如果這個服務只有這個元件在使用，則會放在Component的providers去宣告。…

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已經為我們建好了。 ngModel會處理使用者改變與輸入表單的事件，並更新ngModel裡面的可變數據，讓我們可以去處理後續的事。 也因此ngModel並不是ReactiveFormsModule的一部份。 這代表著使用表單驅動驗證，我們需要撰寫的程式碼更少。 但是如果我們的表單需要很複雜的驗證步驟並且要顯示很多不同的錯誤訊息時，使用表單驅動驗證會使事情變得更複雜並難以維護。 最大的差異，同步與非同步 Reactive forms是同步的而Template-driven forms為非同步處理，是這兩者間最大的差異。 對Reactive forms來說，所有表單的資料是在code裡以tree的方式來呈現，所以在任一個節點可以取得其他表單的資料，並且這些資料是即時同步被更新的。我們也可以在使用者修改了某個input的值時，去為使用者自動update另一個input內的預設值，這是因為所有資料都是隨時可取得的。 Template-driven forms在每一個表單元件各自透過directive委派檢查的功能，為了避免檢查後修改而造成檢查失效的問題，directive會在更多的時後去檢查輸入的值的正確性，因此並沒有辦法立即的得到回應，而需要一小段的時間才有辦法得到使用者輸入的值是否合法的回應。這會讓我們在撰寫單元測試時更加複雜，我們會需要利用setTimeout去讓取得的檢查結果是正確的 使用Reactive Forms Reactive…

使用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 + ‘ | ‘; } } 模版驅動的表單 使用模版驅動的表單需要在app.module.ts裡面宣告我們要使用FormsModule這個library，宣告方式如下 import { NgModule } from ‘@angular/core’; import {…

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 pluralizes the value according to locale rules.  I18nSelectPipe：Generic selector that displays the string that matches…