全端開發人員天梯

今天來談談如何在NativeScript專案中，使用Angular CLI建立component、directive和module等程式，節省開發時間。

在過去的文章我們已經學到—Angular2的應用程式是由一個一個的component所堆積組合起來的，這麼做的好處不用多說就是關注點分離，讓你專心在目前的功能上，也不用擔心影響到其他的component，但是當你的程式架構越來越龐大時，管理這些數以百計的components就變成一門學問了，這時候我們就可以透過模組化的機制，更有組織的管理你的所有components，這也就是我們今天要談的主題—Module。

今天我們要介紹Angular2中的attribute directive，透過attribute directive，我們可以自行擴充元件的屬性，讓元件更富有變化性！

前兩篇文章我們已經認識了Pipe的使用方法以及如何自訂Pipe，基本上已經非常實用了，今天在Pipe的最後一篇要稍微深入的解釋自訂Pipe的一個小參數：pure。

上一篇文章我們介紹了Angular2中內建的Pipe，讓我們更容易在View中直接改變資料的顯示方式，今天我們來說明如何設計自己的Pipe。

今天我們要介紹的是Angular2的Pipe，透過Pipe我們可以不用在Component端寫程式改變資料的顯示模式，而是透過外部（也就是Pipe）的模式來調整要顯示的資料內容，如此一來我們就不用在Component中花太多心思去關注內容該如何呈現，再次達到關注點分離的效果。

Angular2是一個純前端的MVC框架，但在開發Web Application時我們有非常多的機會需要透過Ajax與後端的API進行資料的存取，因此Angular2也提供了Http Module，來幫助我們的程式不在只是前端AP而已，而是能與後端聯繫的完整應用。

今天我們要介紹Angular2的Service，透過Service我們可以將資料和商業邏輯統一放到一個（或數個）類別中進行管理，並在多個Components之間共享，讓程式架構更加明確！

在之前的文章中我們學到使用NgFor來方式將陣列資料列舉到畫面上，今天我們更深入來使用NgFor內建定義的五個變數，讓畫面能夠有更豐富的變化。

在上一篇文章中我們學到了如何自訂CSS class，今天我們來學習透過ngClass來為畫面動態的加入或移除class。

在web應用程式中使用CSS可以說是在基本不過的事情，就算移到的Angular2，CSS當然還是依然會大量的被使用；使用CSS感覺好像沒什麼好聊的，不過Angular2可是個花費了數年且結合了社群的腦力激盪開發最終才release的框架，對於處理CSS自然有更獨到方便管理的做法，今天就來談談在Angular2中使用CSS的一些技巧吧！

在前一篇文章「認識Angular2的4種data binding機制」我們學到了4種Angular2的data binding機制後，今天我們一口氣要學習@Input, @output, ngFor和ngIf。這4樣東西學會後，基本上就算是把Angular2最常用的功能都學起來了。我們也會在本篇文章中把基本的TodoApp給完成。

接下來我們來了解一下Angular2中4種主要的data binding機制，如果沒有data binding機制的話，我們必須做很多事情才能讓一個JavaScript中的資料顯示在HTML上，反過來要抓取HTML DOM上的資料也是一件不容易的事情，因此許多前端框架都在努力讓事情變得簡單。透過Angular2的data binding機制我可以更容易讓component與view進行互動，接下來就來看看這4種data binding機制如何使用吧。

之前的文章介紹過Angular CLI的基本用法之後，本篇文章開始就來寫一個簡單的TodoApp，藉此來練習Angular2的各種特色。

在上一篇文章「[Angular2速成班]用Angular CLI節省你的開發時間」中我們快速介紹了Angular CLI的使用方式，透過Angular CLI我們可以很容易的建立一個具有一致性的專案架構，今天我們就來簡單介紹一下使用ng new指令產生的專案目錄內容，讓以後在開發Angular2專案時可以很清楚知道檔案的存放位置。

Angular CLI是隨著Angular2發展時一併產生的一個指令列工具，一樣基於「習慣取代配置」的優良傳統，我們可以用Angular CLI快速產生開發Angular2程式時所需要的檔案範本，另外也包含了軟體開發生命週期會用到的bundle, lint, unit test, end to end test等功能，也全都包在Angular CLI裡面了，因此透過Angular CLI工具，我們可以大幅節省許多準備檔案的時間！由於之後的Angular2速成班教學中我們也會大量使用Angular CLI來產生相關需要的檔案，因此今天就先來簡單介紹一下Angular CLI這個強大的產生器功能。

Angular2前陣子終於脫離RC版堂堂邁入正式版本啦！這代表著基本上之後的更新原則上都不會再有重大的變化，也就是開發上可以比較穩定囉，所以今天就來介紹一下Angular2以及使用官方推出的Angular CLI來建立一個簡單的Hello World程式吧！