【Angular学习】Angular环境配置

【背景】

最近参与了项目的前端开发，接触了Angular，首先了解的就是Angular的环境配置，鉴于以后应该会常常用，所以总结记录下~

【内容】

Angular环境搭建过程：

1.下载安装nodejs：https://nodejs.org/en/（Angular2基于node.js，所以要先安装nodejs环境）

   打开nodejs官网，点击绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）。
node.js插件在windows系统下是个.msi工具，只要一直下一步即可，软件会自动在写入环境变量中，这样就能在cmd命令窗口中直接使用node或npm命令。

node -v 查看node的版本号

npm -v 查看npm的版本号

2.安装cnpm：由于npm安装插件是从国外服务器下载，受网络影响很大，可能出现异常，继而淘宝团队生产一个完整的npmjs.org镜像，用cnpm代替npm, cnpm与nodejs的npm用法一致,只是在执行命令时，将npm改为cnpm

在cmd命令窗口中直接输入下列语句：

npm install cnpm -g --registry=https://registry.npm.taobao.org

因为不同的电脑可能会有所不同，如果上面不行可以换成下面这句：

npminstall cnpm --registry=https://registry.npm.taobao.org -g 

按下enter键直接执行，如下图所示：

安装完毕之后，需输入：

cnpm -v 查看已安装的cnpm版本号

查看版本号或者关闭命令提示符重新打开，否则安装完毕后直接使用会出现错误。

3.安装typescript和typings:因为angular-cli是用typescript写的，所以需要安装typescript和typings

用npm安装typescript和typings,在命令提示符中直接输入：

cnpm install –g typescript typings

运行完毕之后，查看版本确定是否安装成功，在命令提示符中直接输入：

tsc –v

出现版本号，即为安装成功

4.安装@angular/cli:

安装步骤一样，根据安装的版本不同略有改动，早期的版本使用angular-cli，用@angular-cli工具创建项目；最新的版本将angluar-cli修改为@angluar/cli,版本为1.0.1，用@angluar/cli工具创建的项目为ng4
用cnpm安装@angular/cli,直接在命令提示符中输入：

cnpm install –g @angular/[email protected]

环境搭建到此完成，便可以运行ng项目啦，即为angular项目，在命令窗口输入“ng version”,出现如下图所示效果，证明@angluar/cli安装成功。