全端開發人員天梯

Angular 提供了一種可以很擴充元件或HTML標籤屬性的方式，叫做 directive，透過這種方式我們可以很輕易地替現有的元件或 HTML 擴充它的顯示或行為，但單純擴充有時候是不夠的，如果我們希望能夠在程式中操作 directive 的話，今天學習的 exportAs 就是一個很好的使用時機。

昨天我們介紹了一個簡單的方法來實作 two way binding，這種方法在很多情境都非常好用，不過他還是有一些小問題，有些我們會需要在表單中使用自己設計的元件，但若使用 @Input 加上 @Output 的方法，會無法使用到在 Angular 中表單控制項的一些好處，例如加上驗證器的功能，也沒有一些如 ng-dirty 、 ng-invalid 等 CSS class 可用。因此今天我們來聊聊如何自己設計一個表單控制項吧！

在 Angular 中，通常我們會使用 [(ngModel)] 來實現 two way binding，這樣做基本上沒有什麼問題，但 ngModel 只能 binding 在常見的表單控制項上，如 input、select 等，難以自行在元件上時作出 two way binding，雖然還是可以做到，但相對麻煩了一點，今天就先來講一個簡單的實現 two way binding 的技巧吧！

昨天我們簡單介紹了一個模組中的 @NgModule 應該要放些什麼資料，今天我們來理解一下實務上開發 Angular 應用程式時，常見的一些模組化的方式。

Angular 本身內建了一種模組化的機制，這個機制可以幫助我們組織管理一系列相關的程式(如 component、pipe 和 service 等等)，將類型或功能相似的程式封裝成一個一個不同的模組。在開發 Angular 應用程式時，我們一定會有一個根模組，也就是 AppModule ，今天我們就來看看這個模組裡面到底要怎麼封裝不同的程式進來吧！

在設計 Angular 元件(component)時，可以在程式中針對 Angular 在運作程式時放入不同的 hooks(我們通常稱為 lifecycle hooks)，來在不同的行為中做出更深入的處理，今天就讓我們來看看整個元件在執行時所會發生的生命週期以及應用吧！

任何程式要能夠運作，都應該有它的進入點，以及整個程式啟動的流程，今天我們就來看看，到底一個 Angular 應用程式是如何開始啟動的吧！

Angular CLI 基本上已經成為開發 Angular 應用程式的標準配備了，我們會透過 Angular CLI 建立專案、檔案骨架，或是用來執行以及打包應用程式，以及運行測試等等。透過 Angular CLI 可以減少許多開發時期以及執行程式的前置準備時間成本，讓生活變得更加美好！

而到了 Angular CLI 第 6 版後，多了非常多和過去不同的設定，雖然在常用的功能體驗上完全沒有不同，但卻有了更多可以調整的地方，今天就來更加深入理解 Angular CLI 的相關指令、設定與應用吧。

使用 Angular 作為前端開發框架也有兩三年的時間了，這段時間深深能體會到 Angular 是一個非常強大且易學的框架，只要是有點經驗的開發人員，在閱讀過官方的 Tutorial 文件 8 篇文章後，都能夠解決掉大部分的前端需求。

而這次的鐵人賽系列文，則是希望能分享 Tutorial 8 篇文章以外的更多技巧，這些知識可能在官方文件都找得到，也可能是個人的一點經驗；而些知識儘管在平常不一定會使用到，但在適當的時機，卻能幫助我們以更簡潔的程式碼來解決更複雜的問題！

Angular 6正式推出了Angular Elements的功能，讓我們可以將Angular元件轉換成標準的Custom Elements功能，在任何其他的HTML頁面中使用，這代表著Angular的應用範圍可以延伸到各種web應用去了！就算團隊中習慣用的是jQuery，我們也能夠把複雜的功能專換成Custom Elements，並且直接用在使用jQuery或其他靜態網站中，非常的方便！！

今天我們就來簡單看看如何使用Angular Elements，以及實際把它運用到一般的HTML頁面，來學習理解Angular Elements的強大吧。