Angular
[Angular] Idle timeout checking
Idle timeout is one of the feature to enhance security by enforce logout if not used. In Angular, idle timeout can be done by rxjs. This demo will show the steps on adding and enable […]
Angular
Angular
[Typescript] Cookie handling in Angular
Cookie is one of the persistent storage in web client. It can ensure data persistent even page refresh. Compare with Local storage, it has additional security as it natively support expire date time. As contract, […]
Angular
[Angular] 自建Duel List
在設計介面時, 有時會利用duel list 去顯示現有item 及可以加入的item. 在Angular 中, 可以安裝 angular-dual-listbox 實現. 而它亦可以自己修改設計. 示範中會利用它自建主題及加入add/ remove all 功能.
Angular
[Angular] 利用interceptor 將回傳的Date string 轉做 Date object
在Angular 中, Pipe 就像WPF 中的coverter 般將接到的data 轉換為用作須要用的format顯示出來. 然而在front-end development 中, 從web service 接到的日期, 通常都被當成string 般處理. 若要須要轉成Date, 則需要透過interceptor 收到response, 利用regular expression 轉換成 Date 回傳出來. 在示範中, 會利用HTTP response 的JSON方法如下.
Angular
[Angular] 利用HttpClient 進行async request
在以前利用JavaScript 進行HTTP request 時, 通常都會等待一段時間才收到response, 若在multi-thread 的環境下, 有機會傳回null 而令執行上出現問題. 從前須要加入setTimeout() 去等待, 現在在ES5後, 則須加入async await 便可. 在示範中會利用service 執行async HTTP request.
Angular
[Angular] 於Kendo Grid 同時加入sort 及 page
Kendo UI 是由Telerik 開發的一套Web UI 套件. 使用它主要是因為它強大的後台Microsoft 支撐. 而這幾年, 它亦開始了Angular 的開發. 然而, 其功能若跟WPF control 比較, 則有得多要改善的地方. 而在示範中, 則補元了datagrid 中出了page 後sorting 的功能. 方法如下.
Angular
[Angular] 於Angular 加入build profile 設定
在Visual Studio中, 可以透過修改project 檔案加入不同的profile. 而在Angular 中, 亦有相同的設定. 透過利用Angular CLI (Command-Line Interface) 建立的專案, 則可直接修改angluar.json 進行設定. 方法如下.
Angular
[Angular] 建立 Service
在Angular中, 有時須要不同component中處理相同工作(例如getUserByID()), 通常都會將method 抽離到另一個method獨立執行. 而在Angular中 稱為service. 本質就是一個Injectable 的class. 它可以在不同component 中的constructor 中建立而不用去new 它出來.
Angular
[Angular] 實現Two Way Binding
在MVC 中, Model 中的內容通常都要透過Binding 才可以顯示出來. 同樣地, 這裡會示範如何利用Angular 做data binding.
Angular
[Angular] 自建custom component
Angular Component 類似WinForm / WPF 的User control, 將一個會重覆使用的markup 抽出成獨立個體, 並於不同地方使用. 從而加快develop / change 速度. 在這裡, 會以建立一個layout component 示範如何建立custom component.