1.安裝NodeJs和npm
<1>nodejs安裝
windows下的NodeJS安裝是比較方便的（v0.6.0版本之后，支持windows native），只需要登陸官網(wǎng)（http://nodejs.org/），便可以看到首頁的“INSTALL”按鈕懈费，直接點擊就會自動下載安裝了。安裝過程基本直接“NEXT”就可以了。（windows的安裝msi文件在過程中會直接添加path的系統(tǒng)變量尊惰，變量值是你的安裝路徑，例如“C:\Program Files\nodejs”）纬向。安裝完成后可以使用cmd（win+r然后輸入cmd進入）測試下是否安裝成功择浊。方法：在cmd下輸入node -v，出現(xiàn)下圖版本提示就是完成了NodeJS的安裝逾条。
<2>配置nodejs系統(tǒng)路徑
? ? ? ?(1)打開系統(tǒng)對話框琢岩，“我的電腦”右鍵“屬性”-“高級系統(tǒng)設(shè)置”-“高級”-“環(huán)境變量”。如下圖
? ? ? ? ?(2)進入環(huán)境變量對話框师脂，在系統(tǒng)變量下新建"NODE_PATH"担孔，輸入”C:\Program Files\nodejs\node_global\node_modules“。（ps：這一步相當關(guān)鍵吃警。）用戶變量都要跟著改變一下（用戶變量"PATH"修改為“C:\Program Files\nodejs\node_global\”）糕篇，要不使用module的時候會導(dǎo)致輸入命令出現(xiàn)“xxx不是內(nèi)部或外部命令，也不是可運行的程序或批處理文件”這個錯誤”酌心。
<3>npm的安裝和配置npm的全局模塊的存放路徑以及cache的路徑拌消。
? ? ? ? ? (1)由于新版的NodeJS已經(jīng)集成了npm，所以之前npm也一并安裝好了安券。同樣可以使用cmd命令行輸入"npm -v"來測試是否成功安裝墩崩。如下圖氓英，出現(xiàn)版本提示便OK了。
? ? ? ? (2) 然后配置npm的全局模塊的存放路徑以及cache的路徑鹦筹，例如我希望將以上兩個文件夾放在NodeJS的主目錄下铝阐，便在NodeJs下建立"node_global"及"node_cache"兩個文件夾。如下圖
? ? ? ? ?(3)啟動cmd铐拐，輸入
npm configsetprefix"C:\Program Files\nodejs\node_global"
以及
npm configsetcache"C:\Program Files\nodejs\node_cache"
<4>測試是否安裝成功
以上步驟都OK的話徘键，我們可以再次開啟cmd命令行，進入node遍蟋，輸入“require('express')”來測試下node的模塊全局路徑是否配置正確了吹害。正確的話cmd會列出express的相關(guān)信息。如下圖（如出錯一般都是NODE_PATH的配置不對）
2.安裝angular-cli
<1>安裝 typescript 和 typings
打開“cmd”或者"nodejs command promet"
由于angular2是基于typescript構(gòu)建虚青，所以我們必須安裝typescript赠制。
npm install -g typescript typings
<2>安裝 angular-cli
npm install -g angular-cli
<3>如果安裝angular-cli出錯的解決辦法
如果你之前安裝失敗過，最好在安裝angular-cli之前先卸載干凈挟憔，用以下兩句：
npm?uninstall?-g?angular-cli
npm?cache?clean
同時钟些，在檢查你全局的那些npm文件下還殘留下圖這兩個文件，
有的話也要刪掉绊谭，刪掉后再用"npm uninstall -g angular-clit"安裝最新的angular-cli即可政恍。
以上一個angular項目環(huán)境就配置好了，接下來就可以做項目啦
3.項目構(gòu)建
<1>使用 angular-cli 新建一個 AngularJs2 項目
ng new hello-world
如圖：(會比較慢达传，要耐心等待)
<2>使用 angular-cli 啟動簡易服務(wù)器來測試項目
ng server(注意：一定要在你建的項目下執(zhí)行)
<3>測試：修改顯示內(nèi)容為hello world !
進入/src/app/app.component.ts內(nèi)篙耗，修改該Component為如下代碼
```
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']})
export class AppComponent {
title = 'hello wolrd !';
}
```
我們可以看到，該Component內(nèi)指定了模板文件為app.component.html,樣式文件為app.component.css,現(xiàn)在我們打開app.component.html查看模板宪赶，如下：
```
{{title}}
```
此時綁定變量和angular的預(yù)防相同宗弯，現(xiàn)在我們再在模板內(nèi)隨意添加一些內(nèi)容，如：
```
{{title}}
this is my first app
```
再次打開[http://localhost:4200](http://localhost:4200)進行訪問搂妻，可看到我們的頁面內(nèi)容已經(jīng)修改為對應(yīng)的內(nèi)容蒙保。
以上就是手工創(chuàng)建angular2項目的過程
注意：如果實在github上下載的別人的項目
下載項目并解壓到你的項目目錄下
cd? 你項目所在的目錄
npm install
npm start
