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

Angular 2 Forms 介紹

前言

Angular 2 目前已經來到 RC 4 了,相信再過不久就會即將正式的 Release,這次就先針對官網上表單(Forms)文件的部分來做研究與紀錄。之後再寫其他關於 Angular 2 的介紹。現今的 Web 應用 ,不論是登入頁面、會員申請、購物車等各式各樣的應用一定都會使用到表單,透過表單來建立一個有凝聚力且有效、引人注目的資料輸入體驗。Angular 表單整合了使用者資料繫結控制,追蹤變更、驗證輸入的正確性並提供錯誤訊息顯示。

我們將會從頭開始建立一個範例表單,分成幾個項目並按照逐一實作。實作的項目有:

  • 使用 Component 與 Template 建立一個 Angular 表單
  • 使用 [(ngModel)] 語法實現雙向資料繫結,提供讀取與寫入控制項的值
  • 結合一個表單來使用 ngModel ,能讓我們跟蹤狀態的變化並對表單控制項做驗證
  • 特殊的 CSS 類別 ( Class )會用來反應控制項的狀態,並能提供強烈的視覺反饋
  • 向使用者顯示有效性驗證的錯誤提示和啟用/關閉表單控制項
  • 透過 Template 參考變數,在控制項之間共享資訊

Read More

Hexo 預設 template 頁面切換按鈕問題

最近開始在使用 Hexo 來寫部落格文章,這是一個 blog framework,使用起來很方便。只要透過 Markdown 語法就可以做出常用的基本排版了,之後再寫篇介紹的文章囉!

今天遇到了一個問題,Hexo 的預設佈景主題 landscape 文章列表的頁面切換按鈕顯示異常。看到覺得奇怪,難道這是什麼神奇的格式嗎?

按鈕文字應該是要顯示下一頁才對吧?

經過抽絲剝繭的調查,原來是預設的佈景主題在頁面切換的按鈕語法似乎寫錯了。
下面是 template 中 archive.ejs 的檔案其中一部分的內容,主要就是 page-nav 的部分有誤。

1
2
3
4
5
6
7
8
<% if (page.total > 1){ %>
<nav id="page-nav">
<%- paginator({
prev_text: "&laquo; +__('prev')",
next_text: "__('next')+ &raquo;"
}) %>
</nav>
<% } %>

將上方的 prev_textnext_text 後面的內容修改一下,引號的位置錯囉…

1
2
prev_text: "&laquo; "+__('prev'),
next_text: __('next')+" &raquo;"

這樣就可以正常顯示囉 XD

這才是正確的按鈕文字的顯示