538
二、Angular 2.0開發指南以及搭建開發環境
自第一章講Angular2.0的簡單開發入門，我們了解到ng2的開發實踐是圍繞著web-component來展開的，ng2中更加強化了Component的概念，弱化了指令的概念（實際上Component是複雜指令）。同時我們學習到web-component中數據和視圖是如何互相影響的，即
Input和Output的概念，數據通過Input往view以及view裏的子組件傳遞，view及其子組件通過Ouput來改變數據（VM通過數據綁定機製實現互通，View <- data-bindings -> Model)。
簡單回顧上周分享（勐擊**此處**）內容後，是否有躍躍欲試的衝動。這章帶你快速搭建前端開發環境以及指導你如何學習ng2和解決開發過程中遇到的問題。
搭建開發環境
前端一直以來都是發展迅速，前端構建，前端開發IDE，前端應用型框架也更加完善和規範等。但是線上相關產品也是層出無窮，我們如何選擇前端的開發工具呢。這裏我們推薦的Webpack + Angular2 + vscode/webstrom集成開發，其中好處不在此敷述，所以這章會教大家搭建好這套集成開發環境。
實際上我們提供了一個ng2開發樣板庫webapp，在readme.md中有詳細說明如何安裝前端環境。環境搭建好後，按照腳本說明啟動本地服務，即可訪問到webapp提供的Demo示例。
搭建環境簡單總結為3個步驟
- 安裝開發工具 sublime text、 vscode 和webstorm 3選一
- 使用nvm管理nodeJS版本
brew -> nvm -> nodeJS@v6.2.0 -> tnpm - 本地集成環境 naza-server@2.0.0-alpha -> quick start
Angular2.0開發指南
ng2官網文檔的開發者指南有做詳細介紹，但對於新手來說，可能對於ng2中的一些概念和特性還比較陌生，所有這裏會從我個人學習ng2的經驗來理解ng2的一些簡單概念和開發思路。
ng2開發應用的步驟歸納
bootstrap -> app -> components -> services -> utils（http, pipes, etc...）
- bootstrap初始化應用，指定參數一般是app，通過bootstrap，app組件開始應用到頁麵中，展現我們想要看到的效果。
- app，我們這裏假設應用就是一個大組件，app就是這個大組件，在這個大組件裏，我們把頁麵分隔為很多個小組件，每個組件實現頁麵的具體的一部分功能，所有功能構成一個整體。
- components多個小組件，開發思路和app，即可以有自己的子組件，可以一直嵌套下去。
- services服務，實際上是封裝好的代碼邏輯，可以是數據，函數，類等，組件中注入service可以使用到提供的封裝邏輯。
- utils工具類，是services封裝邏輯是需要用到的工具類，比如ajax請求需要用到http類等。
ng2開發過程的代碼實現
我們更關心在ng2開發過程中，components如何嵌入多個子組件和服務，其中decorator和metadata概念如何理解。看官網提供的的關係圖：
-
ComponentsvsDirectives組件和指令的同異點- 組件也是指令，指令分為3種類型：組件，結構指令和屬性指令。
- 組件是複雜指令，具有更豐富的生命周期（比如組件渲染之前，組件渲染成功）
- 創建組件類需要@Component, 創建指令需要@Directive
-
Decorators和metadata的關係- 裝飾器是用來裝飾組件，類，函數甚至參數的行為。
- 裝飾器工作時，需要傳入一些配置信息，這些配置信息統稱為metadata
- metadata實際上還包含整個應用的一些全局配置信息。
-
Directives和services的關係- 指令和服務獨立開發，但指令需要調用服務時，通過metadata的providers聲明後方可使用。（提示：指令定義需要@Component或者@Directive來裝飾，這裏說的metadata就是這2個裝飾器的配置信息）
- 指令中使用服務時，需要在指令類的constructor的參數中聲明使用的服務，指令在工作時，ng2內部會自動注入服務的實例到constructor中。
- 父指令聲明了服務，在子指令可以不用聲明也可以使用。
- 這裏說的指令涵蓋組件和指令
在了解ng2編碼的同時，我們會發現ng2把框架提供的功能全分散到各個模塊中，比如@Component需要通過
import { Component } from '@angular/core'來獲取到，而ngFor指令需要import { NgFor } from '@angular/common'。具體那些功能在於哪些模塊，貌似隻能通過官方提供的API（勐擊此處)來查找了，但是我們通過給模塊做個分類，更加方便我們查找相關的API
ng2模塊分類
先上圖
最重要的4個模塊基本能解決新手開發的需要，4個模塊分別為：
1. @angular/core，所有組件、指令、服務等定義類時需要的裝飾器，都可以通過 @angular/core 找到
2. @angular/common, 所有ng2提供的指令、服務和過濾管道pipes（主要做轉換，比如貨幣轉換，json轉字符串等），通過 @angular/common 可以找到。
3 @angular/http，所有ajax請求相關的API在此
4. @angular/platform-browser-dynamic, 實際上我們隻用到bootstrap，但也是基本應用初始化必須使用的。
OK，更多的內容，還需要各位在學習的過程中慢慢體會和理解其原理，ppt比較簡陋，確是這段時間個人學習ng2的一個心得，細細品味，相信你會有更多的收獲。：）
本次章節PPT
最後更新：2017-06-05 11:33:34