1.集成開發(fā)環(huán)境
搭建開發(fā)環(huán)境是一件很麻煩的事情，請大家一定要根據(jù)我講的這個方法來搭建這個環(huán)境。
方法一：Angular-cli（內(nèi)核是webpack）
方法二：Webpack
Angular-CLI 是 Google Angular 核心團隊提供的開發(fā)工具，集成了大量的 NodeJS 模塊，例如：webpack，karma，asmine，typescript 編譯器等。只要一條命令就能幫你自動創(chuàng)建項目的目錄結構、自動幫你生成 Component 骨架代碼并自動添加依賴、自動熱加載代碼、對 AngularMaterial2 組件庫提供了內(nèi)置支持等等，不用再一個一個去配了。
2.安裝流程
安裝node.js。在cmd中輸入命令nod -v查看版本（注意有的模塊要與之對應的版本才能兼容）
node.js有自己的包管理器npm。由于某種神奇的原因，都懂得。有些模塊比如node-sass會被墻掉。沒辦法安裝，那怎么辦呢？
有個東西叫cnpm，是淘寶的人提供的一個npm的鏡像。每10分鐘就和官方版本同步一次。服務器是在國內(nèi)的，不用擔心速度和被墻的問題。
>通過這條命令安裝cnpm：
npm install -g cnpm
-g是global裝在全局空間，路徑是C:\Users\ksqb0\AppData\Roaming\npm
3.安裝angular/cli
輸入cnpm install -g @angular/cli。如果要更新cli的版本，卸載npm uninstall -g @angular/cli，再重新安裝。
輸入ng查看是否安裝成功，它會告訴你很多命令的用法。ng version查看版本。
通過CLI，你可以創(chuàng)建、開發(fā)、測試、構建項目，而不需要額外的依賴。它封裝了實現(xiàn)細節(jié)，如果是新手，你完全不需要懂Webpack，也不需要自己寫構建腳本。
4.啟動項目
選擇指定路徑創(chuàng)建新項目ng new MyProject。創(chuàng)建完之后它會自動生成目錄結構，根組件，package.json里的依賴的模塊。
cd到項目目錄，cnpm install。cnpm裝的包它是會讀到目錄下的package.json，所以不用-g，所依賴的包裝在項目目錄node_modules的文件夾里。
輸入ng serve啟動。這樣在4200端口就有一個輕量級開發(fā)狀態(tài)的http serve。打開瀏覽器輸入localhost:4200打開
5.常見問題
為什么用cnpm安裝？
原生npm的安裝需要你的機器有python的環(huán)境,然后可能依賴于Windows API。node-sass的包被墻。node-gyp編譯錯誤等一些大堆的問題。
關于目錄結構
命令行工具是按照一定的規(guī)則生成文件和目錄，如果改變文件的位置或重命名文件，有可能導致其他的功能失效。除非你明確的知道你要干什么，否則就不要改這些文件。
6.擴展思考
項目目錄每一層都生成了什么：
e2e：端到端的測試目錄
karma.conf.js：單元測試執(zhí)行器
src：代碼目錄
angular-cli.json：這是angular命令行工具的配置文件
package.json：npm的配置文件，列明了當前應用所使用到的第三方依賴包。
src目錄：
app：包含項目的組件和模塊
assets：存放靜態(tài)資源，比如圖片
environment：環(huán)境配置文件
index.html：根html
main.ts：腳本執(zhí)行的入口點，通過這個文件啟動項目
polyfills.ts：導入一些必要的庫，用來兼容老版本瀏覽器
style.css：全局樣式
app目錄：一個angular程序需要一個模塊和一個組件
app.component.ts：組件，整個應用的基礎
app.module.ts：模塊
