Angular2入门

一、环境搭建

1.下载nodejs和VSCode，检查是否安装成功 node -v   npm -v(因为在下载nodejs 时，已经顺便下载了npm)

2.配置npm存放路径，在nodejs安装根目录下新建连个文件夹，为别为node_cache和node_global

3.配置系统环境变量，新增环境变量NODE_PATH=xxxx\nodejs\node_global，在path变量中增加%NODE_PATH%

4.安装淘宝镜像

npm config set registry https://registry.npm.taobao.org

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

5.安装CLI，切换到安装cnpm的文件夹，就是前面配置的node_global，打开cmd，输入cnpm install -g @angular/cli，安装后使用ng v 测试安装是否成功，使用npm config list查看配置是否成功

6.安装TypeScript，打开cmd，输入cnpm install -g typescript，测试安装是否成功 tsc -v

二、搭建项目

1、使用命令创建项目

cnpm下创建项目，首先创建项目之前设置为淘宝镜像 ng set --global packageManager=cnpm         然后输入命令 ng new 项目名如果想要创建带路由的项目，使用命令ng new 项目名 --routing。

npm下创建项目，首先创建项目之前设置为npm镜像 ng set --global packageManager=npm           然后输入命令 ng new项目名

如果想要创建带路由的项目，使用命令ng new 项目名 --routing

2、安装PrimeNG

首先进入项目根目录，打开cmd输入命令 cnpm install primeng --save | npm install primeng --save，安装后，在项目的package.json中会自动配置primeng

3、安装第三方awesome字体

cnpm install font-awesome  --save | npm install font-awesome  --save

4、安装angular4+动画

cnpm install @angular/animations  --save | npm install @angular/animations  --save

5、测试引入的primeng是否有效

输入命令 ng serve ，打开浏览器，输入localhost:4200

6、安装Jquery

npm install jquery --save，因为angular不支持jquery，需要安装一个类型描述文件

npm install @types/jquery --save