Angular之HelloWorld——Angular(1)

灰太狼 2023-02-17 15:00 150阅读 0赞

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

##### 1. 环境搭建 #####

###### 1.1 安装nodejs ######

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

###### 1.2 安装cnpm ######

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

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

成功安装如下：  
![在这里插入图片描述][20200614210233914.png]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz_size_16_color_FFFFFF_t_70]

###### 1.4 使用cnpm安装angular ######

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

> cnpm install -g @angular/cli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz_size_16_color_FFFFFF_t_70 1]

到此说明angular已成功安装

##### 2. 创建项目 #####

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

样式我们选择使用scss,项目创建完成取消安装依赖（默认的依赖安装方式使用的是npm，因此我们需要手动使用cnpm安装依赖）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz_size_16_color_FFFFFF_t_70 2]

###### 2.2 安装依赖 ######

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

> cnpm install

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

##### 3. 启动项目 #####

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

> ng serve --open

第一次启动需要编译所以需要时间比较长  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz_size_16_color_FFFFFF_t_70 3]  
可以看我第一个项目已经成功启动

##### 4. 修改HelloWorld #####

###### 4.1 使用vs打开此项目 ######

打开index.html并增加h2标签，保存并刷新地址（热部署）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz_size_16_color_FFFFFF_t_70 4]  
可以看到页面已经成功加载  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz_size_16_color_FFFFFF_t_70 5]

[Link 1]: http://nodejs.cn/download/
[20200614210233914.png]: https://img-blog.csdnimg.cn/20200614210233914.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200614210416582.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200614210655795.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200614213504339.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200614220324504.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020061422082692.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200614220903419.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d3el82OTAz,size_16,color_FFFFFF,t_70