Angular之HelloWorld——Angular(1)

一个后端都没有摸透的渣渣今天又开始接触前端Angular，作为一个极其喜欢新事物的工科男来说，不写篇博客都有点儿对不起自己。闲话不多说，下面开始正文！

1. 环境搭建

1.1 安装nodejs

除安装路径之外，默认安装即可，nodejs下载链接

1.2 安装cnpm

由于Angular CLi的一些资源被墙掉了，所以这里我们使用淘宝的镜像去下载安装

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

成功安装如下：

1.3 使用cnpm -v 查看cnpm是否成功安装

1.4 使用cnpm安装angular

如果可以翻墙也可以使用npm，但是此处推荐使用cnpm

cnpm install -g @angular/cli

到此说明angular已成功安装

2. 创建项目

2.1 创建项目ng new HelloWorld(项目名称)

样式我们选择使用scss,项目创建完成取消安装依赖（默认的依赖安装方式使用的是npm，因此我们需要手动使用cnpm安装依赖）

2.2 安装依赖

进入到项目路径下使用安装依赖

cnpm install

安装依赖的时间比较长，请耐心等待

3. 启动项目

依赖安装完成之后可以使用如下命令启动依赖（默认的端口是4200）

ng serve --open

第一次启动需要编译所以需要时间比较长

可以看我第一个项目已经成功启动

4. 修改HelloWorld

4.1 使用vs打开此项目

打开index.html并增加h2标签，保存并刷新地址（热部署）

可以看到页面已经成功加载