1.安装NodeJs和npm

<1>nodejs安装

windows下的NodeJS安装是比较方便的（v0.6.0版本之后，支持windows native），只需要登陆官网（http://nodejs.org/），便可以看到首页的“INSTALL”按钮，直接点击就会自动下载安装了。安装过程基本直接“NEXT”就可以了。（windows的安装msi文件在过程中会直接添加path的系统变量，变量值是你的安装路径，例如“C:\Program Files\nodejs”）。安装完成后可以使用cmd（win+r然后输入cmd进入）测试下是否安装成功。方法：在cmd下输入node -v，出现下图版本提示就是完成了NodeJS的安装。

<2>配置nodejs系统路径

       (1)打开系统对话框，“我的电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量”。如下图

         (2)进入环境变量对话框，在系统变量下新建"NODE_PATH"，输入”C:\Program Files\nodejs\node_global\node_modules“。（ps：这一步相当关键。）用户变量都要跟着改变一下（用户变量"PATH"修改为“C:\Program Files\nodejs\node_global\”），要不使用module的时候会导致输入命令出现“xxx不是内部或外部命令，也不是可运行的程序或批处理文件”这个错误”。

<3>npm的安装和配置npm的全局模块的存放路径以及cache的路径。

          (1)由于新版的NodeJS已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行输入"npm -v"来测试是否成功安装。如下图，出现版本提示便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的相关信息。如下图（如出错一般都是NODE_PATH的配置不对）

2.安装angular-cli

<1>安装 typescript 和 typings

打开“cmd”或者"nodejs command promet"

由于angular2是基于typescript构建，所以我们必须安装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项目环境就配置好了，接下来就可以做项目啦

3.项目构建

<1>使用 angular-cli 新建一个 AngularJs2 项目

ng new hello-world

如图：(会比较慢，要耐心等待)

<2>使用 angular-cli 启动简易服务器来测试项目

ng server(注意：一定要在你建的项目下执行)

<3>测试：修改显示内容为hello world !

进入/src/app/app.component.ts内，修改该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内指定了模板文件为app.component.html,样式文件为app.component.css,现在我们打开app.component.html查看模板，如下：

```

{{title}}

```

此时绑定变量和angular的预防相同，现在我们再在模板内随意添加一些内容，如：

```

{{title}}

this is my first app

```

再次打开[http://localhost:4200](http://localhost:4200)进行访问，可看到我们的页面内容已经修改为对应的内容。

以上就是手工创建angular2项目的过程

注意：如果实在github上下载的别人的项目

下载项目并解压到你的项目目录下

cd  你项目所在的目录

npm install

npm start