Angular Directive 初探 - Part.3
前兩篇文章，Part.1 和 Part.2 的介紹，可以認識到如何寫一個簡單且富有彈性的 directive 並套用，這次來嘗試將 jQuery datepicker 的執行改成 directive ，並認識一下 Angular Directive 的 Decorator 吧！ 製作 jQuery datepicker 的 directive首先，npm 要先準備好 jquery 以及 bootstrap-datepicker，包含定義檔的部分： npm install jquery bootstrap @types/jquery @types/bootstrap-datepicker --save 相依套件安裝完成後，到 tsconfig.app.ts 中，將 types 的陣列加上 “jquery” ..
Read moreAngular Directive 初探 - Part.2
上一篇文章，我們初步了解 directive 基本的使用方式，這次來嘗試加入一些事件或值的傳遞，進一步體驗這強大又方便的 Angular Directive。 反應由使用者發起的事件目前 appHighlight 很單純的去改變一個元素的樣式而已，但 directive 可以做得更動態，例如我們可以指定當使用者將滑鼠移入或移出元素的時候，進行背景色的改變。在最上方從 @angular/core import 的部分加入 HostListener： import { Directive, ElementRef, OnInit, HostListener, Input, } from '@angular/core'; 然後加入兩個 eventhandle..
Read moreAngular Directive 初探 - Part.1
最近買了一本中國的 Angular 2 簡體書，想看看有別於自己的角度，如何介紹 Angular ，再加上想深入研究 directive 的部分，因此除了 Angular 官網，也參考了這本書的部分內容，希望對大家有所幫助。 Directive 又翻做 “指令”，但我還是習慣直接叫 directive 在 Angular 的世界中，directive 扮演相當重要的角色之一，它可以在特定的 DOM 元素上執行，進而擴充這個元素的功能，為元素增加新的方法。而我們最常用的元件 ( Component )，基本上就是一個帶有 template 的 directive，它繼承了 directive，是 directive 的一個子類別，通常用來打造 UI 的部分。 在開始介紹 directive 之前，稍微複習一下..
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