Angular Directive 初探 - Part.4
在初探 part.1 的時候，提到了 Angular directive 有分三種，Component, Attribute Directive and Structural Directive，而之前介紹了 Attribute Directive，知道如何建立與使用，這次就來研究一下 Structural Directive 吧！ 什麼是 structural directive ?Structural directives 負責 HTML 的 layout。通常是藉由加入、移除或操作 element ，將 DOM 架構進行繪製或重繪的動作，就和其他的 directives 使用方式一樣，套用到 HTML host element 上，並且依照這個 directive 有什麼功能去進行處理，而被套用的 h..
Read moreAngular 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