Angular Directive 初探 - Part.3

前兩篇文章,Part.1 和 Part.2 的介紹,可以認識到如何寫一個簡單且富有彈性的 directive 並套用,這次來嘗試將 jQuery datepicker 的執行改成 directive ,並認識一下 Angular Directive 的 Decorator 吧!

製作 jQuery datepicker 的 directive

首先,npm 要先準備好 jquery 以及 bootstrap-datepicker,包含定義檔的部分:

1
npm install jquery bootstrap @types/jquery @types/bootstrap-datepicker --save

相依套件安裝完成後,到 tsconfig.app.ts 中,將 types 的陣列加上 “jquery” 字串,代表加入定義。或許你會有疑問,為什麼 tsconfig.json 中已經有設定 typeRoots 了,為何 tsconfig.app.json 還要再加上 “jquery”?

雖然 tsconfig.app.json 繼承了 tsconfig.json 但這裡的 types 是空陣列,因此造成 tsconfig 的 typeRoots 不會讀進來,在編譯的過程中就會報錯,這還滿雷的…Orz 除了在 tsconfig.app.json補上 types 之外,你也可以直接刪除 types,如此一來就只會抓 tsconfig.tstypeRoots 囉…

npm, tsconfig 都準備好之後,把剛才安裝好的套件加入 Angular-CLI 的設定檔,主要是 jquery 的 js 以及 datepicker 的 css & js 檔案要進行引入的動作:

Read More

Angular Directive 初探 - Part.2

上一篇文章,我們初步了解 directive 基本的使用方式,這次來嘗試加入一些事件或值的傳遞,進一步體驗這強大又方便的 Angular Directive。

反應由使用者發起的事件

目前 appHighlight 很單純的去改變一個元素的樣式而已,但 directive 可以做得更動態,例如我們可以指定當使用者將滑鼠移入或移出元素的時候,進行背景色的改變。在最上方從 @angular/core import 的部分加入 HostListener

1
import { Directive, ElementRef, OnInit, HostListener, Input } from '@angular/core';

然後加入兩個 eventhandlers 負責處理 mouse enters 或 leaves 的事件,由於滑鼠的進入及離開共有兩個事件,要加上各自的 @HostListener decorator 共兩個:

1
2
3
4
5
6
7
@HostListener('mouseenter') onMouseEnter() {
this._el.nativeElement.style.backgroundColor = 'green';
}
@HostListener('mouseleave') onMouseLeave() {
this._el.nativeElement.style.backgroundColor = 'orange';
}

透過 HostListener 來監聽事件並進行處理,就可以讓 directive 實現更多動態的功能囉,那如果要從外部傳值進來讓 directive 進行處理的話呢?我們接著往下看。

Read More

Angular Directive 初探 - Part.1

最近買了一本中國的 Angular 2 簡體書,想看看有別於自己的角度,如何介紹 Angular ,再加上想深入研究 directive 的部分,因此除了 Angular 官網,也參考了這本書的部分內容,希望對大家有所幫助。

Directive 又翻做 “指令”,但我還是習慣直接叫 directive

在 Angular 的世界中,directive 扮演相當重要的角色之一,它可以在特定的 DOM 元素上執行,進而擴充這個元素的功能,為元素增加新的方法。而我們最常用的元件 ( Component ),基本上就是一個帶有 template 的 directive,它繼承了 directive,是 directive 的一個子類別,通常用來打造 UI 的部分。

在開始介紹 directive 之前,稍微複習一下 HTML 的相關內容。

Read More

Angular FormGroup 取得所有 formControl 的值

消失的欄位資料

最近在專案上遇到表單處理的問題,主要是 UI 上的需求是有條件的 disabled 控制項,換句話說,在某些情況下,指定的表單控制項在畫面上要是鎖定的狀態,但是在呼叫 API 的時候還是得要取得欄位鎖定的內容。強者我同事,在準備回傳給 API 的物件資料時,偶然發現到控制項在 disabled 的狀態下,FormGroup 是取不到 disabled 欄位 Value 的,究竟那消失的欄位到底是去哪了?明明在畫面上,DOM 也有值在裡面,為何就是取不到?

原來…欄位一直都在,從沒離開過。

Read More

Angular-CLI 設定 Global

介紹 Global 設定

上次介紹了 Angular-CLI JSON 設定檔中 assets 的設定,讓我們不需再逐一的手動人肉複製需要的 assets,這次來介紹在透過 Angular-CLI 進行專案開發時,與全域有關的設定,主要有三種:Global Library Installation, Global Scripts, Global Styles。接下來我一樣參考了 Github 上的文件來做整理與介紹。藉此讓大家可以更了解 Angular CLI 的設定,以節省時間及方便專案內容的管理。

Read More

Angular-CLI 設定 - Assets

介紹 assets 設定

我們在使用 Angular-CLI 進行開發的時候,一定要會設定 .angular-cli.json,為了協助大家了解,究竟 angular-cli 的設定檔中的屬性是要設定什麼?我直接參考 Github 的文件來為大家做介紹,就先從 assets 開始吧!

angular-cli.json 中的 assets 屬性存放的是一個陣列,這個陣列會列出有哪些檔案或資料夾是 angular-cli 在建置 ( ng build ) 時需要一起複製到專案輸出作為準備佈署的資料夾( 預設是 dist )中。

在新增專案時,預設的 assets 內容如下,意思是在建置時,路徑 src/assets 的目錄和檔案,以及 src/favicon.ico 的檔案會進行複製。

1
2
3
4
"assets": [
"assets",
"favicon.ico"
]

除了以字串的型態表示之外,我們也能以物件的方式來做進一步的設定,底下的物件陣列和上方預設的內容是相同的:

1
2
3
4
"assets": [
{ "glob": "**/*", "input": "./assets/", "output": "./assets/" },
{ "glob": "favicon.ico", "input": "./", "output": "./" },
]

glob 是一個叫 node-glob 的套件使用 input 來當作基礎目錄,以相對路徑的方式表示,input 相對於專案存放原始碼根目錄的位置,也就是相同檔案 angular-cli.json中的 root 屬性指定的路徑 ( 預設為 src/ ),而 output 設定的是相對於建置後,輸出的檔案要存放的位置,也就是 outDir 屬性指定的路徑 ( 預設為 dist )。

相對路徑讓我們可以使用這些進階的設定方式,從專案外部的位置複製需要的資料夾或檔案,例如:從 node_modules 來複製需要的項目:

1
2
3
"assets": [
{ "glob": "**/*", "input": "../node_modules/some-package/images", "output": "./some-package/" },
]

上方的範例指的是,當建置時,要從node_modules/some-package/ 複製 images 資料夾及其內容到輸出的資料夾 dist/some-package/ 中。

小結

透過 angular-cli.json 的 assets 設定,可以讓我們在建置時更有彈性,就不需要自己去尋找檔案做人肉複製貼上了!

參考來源

Angular-CLI - asset-configuration

讓萬惡的舊 IE 支援 Angular 2

萬惡的根源

西元 2017 年,在網站技術蓬勃發展的情況下,各種技術不斷的推陳出新,目的讓網站的效能變得更好,開發模式的優化,對使用者的使用經驗變得更友善,但,世界不可能是完美的,有個萬惡的根源到現在都還無法根除,它讓許多開發者曾經頭痛不已,每次認為告一段落的時候,它,總是會讓許多網站開發者面臨絕望,它就是 Internet Explorer 瀏覽器。

Angular 2 也是一樣,對於舊版的 IE 預設的情況下是沒有支援的,但生命總是會找到屬於自己的出口,在許多熱情的開發者不斷的努力情況下,出現了針對讓舊版瀏覽器支援新程式碼的函式庫,我們稱這些套件為 Polyfill

Read More

Angular 2 Forms 介紹:Model-Driven Forms

面對各種神奇需求的表單,要能克服重重挑戰,就用 Model-Driven 實作吧!

上一篇我們已經介紹了如何使用 Template-Driven 進行表單的開發,對於大部分簡易的表單,搭配預設提供的 Validator Directive,就能輕鬆的實作出可驗證、有提示互動的表單。但人生總不會是都那麼的簡單,在實戰開發上,我們往往會遇到各種神奇的表單需求,可能是多個欄位之間會有複雜的驗證,抑或是動態的驗證,甚至連表單的欄位是動態的!

對於這些奇葩的需求,相信有遇過的朋友都知道,光靠是 Template-Driven 是不夠的,雖然 Template-Driven 也可以實作出複雜的表單,但會造成 Template 會非常的髒亂,而且開發過程中會在 Template 與 Component 之間來回進行,這樣的開發會很沒有效率,而且做到後面可能頭都昏了。

生命是有限的,我們不該把生命浪費在這奇葩的表單上,因此 Angular 2 提供了另一種表單的實作方式: Model-Driven Forms !話不多說,直接開始吧!首先,我們直接透過 Angular CLI 新增一個專案:

範例飯粒在此

Read More

Angular 2 Forms 介紹:Template-Driven Forms

介紹如何使用 template driven 快速建立簡易的互動表單

Angular 2 正式版在日前已經正式發佈了,因此較不會再遇到 alpha 或 beta 甚至 rc 的時候還出現的重大變更(BREAK CHANGE)了,真的出現的話,我想也應該是 Angular 3 要出來的時候了 XD。

先前參考官方文件介紹過 Angular 2 Forms 的用法,這次來自己實作,以 Template-Driven 的方式建立簡單的登入表單,並且介紹完整的運作流程,主要的內容如下:

  • Import FormsModule & 準備 HTML template
  • 在 Template 中的表單控制項加上 ngModel Directive
  • 初始化表單控制項預設值
  • 使用 ngModel 提供的狀態進行 CSS class 裝飾
  • 追蹤表單驗證狀態並顯示錯誤訊息提示

登入畫面,是我們在任何的 web application 中最常看到的頁面,因此,就以登入畫面來當範例練習吧!

Read More

Angular 2 ngModel 的內幕(?)

關於 NgModel

這篇文章主要來深入討論 [(ngModel)],若你已經有在開發 Angular 2 的專案,或是自己嘗試練習 Angular 的過程中, [(ngModel)] 一定會接觸到的語法,透過[(ngModel)] 實現雙向繫結的功能,但,為什麼要使用中括號和小括號呢?

其實,繫結語法中的 [( )] 符號是一個很好的提示。

Read More