1.安裝NodeJs和npm
<1>nodejs安裝
windows下的NodeJS安裝是比較方便的（v0.6.0版本之后，支持windows native），只需要登陸官網(wǎng)（http://nodejs.org/），便可以看到首頁的“INSTALL”按鈕，直接點(diǎn)擊就會(huì)自動(dòng)下載安裝了。安裝過程基本直接“NEXT”就可以了。（windows的安裝msi文件在過程中會(huì)直接添加path的系統(tǒng)變量，變量值是你的安裝路徑，例如“C:\Program Files\nodejs”）。安裝完成后可以使用cmd（win+r然后輸入cmd進(jìn)入）測試下是否安裝成功。方法：在cmd下輸入node -v，出現(xiàn)下圖版本提示就是完成了NodeJS的安裝。
<2>配置nodejs系統(tǒng)路徑
? ? ? ?(1)打開系統(tǒng)對(duì)話框，“我的電腦”右鍵“屬性”-“高級(jí)系統(tǒng)設(shè)置”-“高級(jí)”-“環(huán)境變量”。如下圖
? ? ? ? ?(2)進(jìn)入環(huán)境變量對(duì)話框，在系統(tǒng)變量下新建"NODE_PATH"，輸入”C:\Program Files\nodejs\node_global\node_modules“。（ps：這一步相當(dāng)關(guān)鍵。）用戶變量都要跟著改變一下（用戶變量"PATH"修改為“C:\Program Files\nodejs\node_global\”），要不使用module的時(shí)候會(huì)導(dǎo)致輸入命令出現(xiàn)“xxx不是內(nèi)部或外部命令，也不是可運(yùn)行的程序或批處理文件”這個(gè)錯(cuò)誤”。
<3>npm的安裝和配置npm的全局模塊的存放路徑以及cache的路徑。
? ? ? ? ? (1)由于新版的NodeJS已經(jīng)集成了npm，所以之前npm也一并安裝好了。同樣可以使用cmd命令行輸入"npm -v"來測試是否成功安裝。如下圖，出現(xiàn)版本提示便OK了。
? ? ? ? (2) 然后配置npm的全局模塊的存放路徑以及cache的路徑，例如我希望將以上兩個(gè)文件夾放在NodeJS的主目錄下，便在NodeJs下建立"node_global"及"node_cache"兩個(gè)文件夾。如下圖
? ? ? ? ?(3)啟動(dòng)cmd，輸入
npm configsetprefix"C:\Program Files\nodejs\node_global"
以及
npm configsetcache"C:\Program Files\nodejs\node_cache"
<4>測試是否安裝成功
以上步驟都OK的話，我們可以再次開啟cmd命令行，進(jìn)入node，輸入“require('express')”來測試下node的模塊全局路徑是否配置正確了。正確的話cmd會(huì)列出express的相關(guān)信息。如下圖（如出錯(cuò)一般都是NODE_PATH的配置不對(duì)）
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出錯(cuò)的解決辦法
如果你之前安裝失敗過，最好在安裝angular-cli之前先卸載干凈，用以下兩句：
npm?uninstall?-g?angular-cli
npm?cache?clean
同時(shí)，在檢查你全局的那些npm文件下還殘留下圖這兩個(gè)文件，
有的話也要?jiǎng)h掉，刪掉后再用"npm uninstall -g angular-clit"安裝最新的angular-cli即可。
以上一個(gè)angular項(xiàng)目環(huán)境就配置好了，接下來就可以做項(xiàng)目啦
3.項(xiàng)目構(gòu)建
<1>使用 angular-cli 新建一個(gè) AngularJs2 項(xiàng)目
ng new hello-world
如圖：(會(huì)比較慢，要耐心等待)
<2>使用 angular-cli 啟動(dòng)簡易服務(wù)器來測試項(xiàng)目
ng server(注意：一定要在你建的項(xiàng)目下執(zhí)行)
<3>測試：修改顯示內(nèi)容為hello world !
進(jìn)入/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}}
```
此時(shí)綁定變量和angular的預(yù)防相同，現(xiàn)在我們再在模板內(nèi)隨意添加一些內(nèi)容，如：
```
{{title}}
this is my first app
```
再次打開[http://localhost:4200](http://localhost:4200)進(jìn)行訪問，可看到我們的頁面內(nèi)容已經(jīng)修改為對(duì)應(yīng)的內(nèi)容。
以上就是手工創(chuàng)建angular2項(xiàng)目的過程
注意：如果實(shí)在github上下載的別人的項(xiàng)目
下載項(xiàng)目并解壓到你的項(xiàng)目目錄下
cd? 你項(xiàng)目所在的目錄
npm install
npm start
