一个后端都没有摸透的渣渣今天又开始接触前端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标签,保存并刷新地址(热部署)
可以看到页面已经成功加载