其實之前就有認真考慮想學React和Angular，本來是打算先學React，不過因為在研究的專案使用的是Angular，所以就先來研究Angular了，而且Angular也開始將文件中文化，我相信在學習上應該會比只有英文文件來得順利一些，不過老實說我覺得Angular有點複雜就是了XD
Angular 2 中文官網：https://angular.cn/
準備工作
首先從官方網站的五分鐘入門開始：
- 安裝Node.js
- 到這個Github頁面，下載入門包（或依官網逐步建立檔案）
- 安裝所需要的Module：
npm install - 安裝TypeScript：
npm install -g typescript - 安裝Typings：
npm install -g typings
到這邊就算是準備完畢了！
Angular基本介紹
Angular App的組成有四大元件：Component、Service 、Router 、Directive
補充：因為Angular有官方中文化文件，所以以下關鍵字會以官方的中文翻譯為主
Component 組件
組件是Angular最基本的組成，一個網站都會有一個AppComponent來當Root Component 根組件，可以想像成樹的最根部。
這個根組件裡面還會有其他組件，例如：SidebarComponent 、HeaderComponent等等，當然還可以繼續長下去變成一棵組件樹。
一個組件包含了許多東西，最基本的有selector和template（組件Metadata）
- selector：輸入資料為CSS選擇器字串，表示這個組件的內容要放在哪裡
- template：輸入資料為Angular自己的Html模組字串，表示如何顯示這個組件的view（Template語法）
組件方便的地方在於獨立性，一個組件包含了自己的View和Controller，在重複利用或維護上都很方便，就像是樂高的一塊積木這樣。
Service 服務
服務就是組件和後端溝通的橋樑，服務負責處理Data Access、Logging等等的工作，而組件只要負責接收資料或傳資料給服務即可。
Router 路由
這個部分我還不是很清楚，按照官方網站的說明是指：「負責導航到目標組件」，後端中Router負責指引該url要連到哪一個檔案，而Angular的路由則是指引到哪一個組件。
Directive 指令
指令就是用來操作DOM用的，Angular有內建很多指令，例如：ngFor、ngif等等，我們可以放在template內來使用，例如：<p*ngIf="condition">Condition is true and I will show up!</p>，這個ngIf就會操作這個DOM的行為，condition為true時顯示，相反則刪除（檢查元素會發現只剩下<script></script>），是刪除而不是隱藏的原因是，一個元素即使隱藏，還是會接收到事件且繼續佔用資源，所以Angular會直接刪除該元素，增加我們App的效能。
第一個Angular App
講了這麼多，該進入正題了，首先看一下我們的資料夾裡面有什麼？
- tsconfig.json：TypeScript的設定，如何編譯之類的
- typings.json：負責管理與JavaScript有關的Library，例如：jQuery
- package.json：官方幫我們準備好的工具包，裡面有寫好的Script和不少插件，我還沒有一個一個去了解用途，大家也可以先自行搜尋一下
建立第一個組件
建立一個app資料夾，在裡面新增一個名為app.component.ts的檔案，這就是我們的Root Component。
檔案內容：
import { Component } from '@angular/core'; //從angular/core引入模板
@Component({ //這是一個裝飾器，告訴Angular如何創建這個組件
selector: 'my-app', //放置這個組件的元素
template: '<h1>My First Angular 2 App!</h1>' //這個組件的view
})
export class AppComponentl{ }; //如何控制view的行為與顯示
啟動應用
建立好我們第一個組件後，我們要有一個檔案來載入它，我們在app資料夾底下新增一個main.ts檔案
檔案內容：
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component'; //從app.component載入組件
bootstrap(AppComponent);
建立index.html
最後，在根目錄新增一個index.html
檔案內容：
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Script載入的地方，system.src.js是指SystemJS，是Angular 2預設的模組載入器，我們也可以用其他東西取代，例如：webpack（雖然我還不會用），詳細SystemJS的設定可以看system.config.js。
這個html有預設載入一個style.css檔，有興趣的話也可以新增一個style.css來玩玩。
啟動App
最後，輸入指令npm start就可以啟動我們的「First App」了！
而且此時你如果對檔案做修改並儲存，伺服器會自動去偵測修改並且自動重新整理喔！
2016-11-08 at 下午 10:21
我的媽呀，跟一代差好多 …. 完全是不一樣的東西