Windows环境安装运行Angular.js

以你之姓@ 2023-10-06 21:55 41阅读 0赞

## 一、npm: [Nodejs][]下的包管理器。 ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_18_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 3]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 4]

打开CMD，检查是否正常  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
再看看另外2个目录，npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\\node-v16.14.0-x64  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_14_color_FFFFFF_t_70_g_se_x_16]  
然后运行以下2条命令  
npm config set prefix “D:\\node-v16.14.0-x64\\node\_global”  
npm config set cache “D:\\node-v16.14.0-x64\\node\_cache”  
![在这里插入图片描述][26e0f250d6854dd789edad94940f71ba.png]  
检查是否设置成功：npm list -global  
![在这里插入图片描述][ead2ec963c2244c7ae383bb29404bd1d.png]  
引进淘宝镜像npm config set registry=http://registry.npm.taobao.org  
![在这里插入图片描述][e994de10613640a6a602837f000a7842.png]  
查看配置信息npm config list  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
更新npm  
npm install npm -g  
![在这里插入图片描述][e6516f9745224e0b82195635f7c806aa.png]  
注意，此时，默认的模块D:\\nodejs\\node\_modules 目录  
将会改变为D:\\nodejs\\node\_global\\node\_modules 目录，  
如果直接运行npm install等命令会报错的。  
我们需要做1件事情：  
1、增加环境变量NODE\_PATH 内容是：D:\\node-v16.14.0-x64\\node\_global\\node\_modules  
![在这里插入图片描述][507c23c0376046e694700d504f179a2c.png]

## 二、安装ts ##

输入命令行：npm install -g typescript

验证tsc -v安装情况

## 三、安装angular cli ##

输入命令行：npm install -g @angular/cli

验证angular CLI安装情况

验证ng -v:  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_16_color_FFFFFF_t_70_g_se_x_16]

## 四、创建angular项目：“Hello Angular!” ##

右击打开cmd  
输入命令行语句：  
创建新项目：ng new Hello-Angular  
![在这里插入图片描述][89d54d07271d4e8cab070fcbb5176d40.png]  
进入项目文件夹：cd Hello-Angular  
执行：ng serve  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
打开浏览器输入：localhost:4200/  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
项目启动成功，大功告成！

## 其他指令 ##

卸载angular/cli：npm uninstall -g angular-cli  
清缓存：npm cache clean -force

项目安装依赖包：cnpm install  
启动项目的另一种方式：cnpm start

[Nodejs]: https://nodejs.org/zh-cn/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/a8fb429520a74d18844f125993097d76.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e88ab03212ae4878b070162830e563e1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/968e5248a50941dbb629b67a41fe3c66.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/d1003d30fbf3495ab238a07c4b006184.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/2fb9b20306b0446b9e0b42f075a33fb6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/c752532bb4d44bcdbbda727d22cd364c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/4b7cabf3ccee418e8845b4ee97b18f4d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/9986462feff74168a6863712ce6789a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/ca63089de4d64a61b2515317abe806ff.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/41f61a4558d2412fa8331f93fa0d2d02.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_14,color_FFFFFF,t_70,g_se,x_16
[26e0f250d6854dd789edad94940f71ba.png]: https://img-blog.csdnimg.cn/26e0f250d6854dd789edad94940f71ba.png
[ead2ec963c2244c7ae383bb29404bd1d.png]: https://img-blog.csdnimg.cn/ead2ec963c2244c7ae383bb29404bd1d.png
[e994de10613640a6a602837f000a7842.png]: https://img-blog.csdnimg.cn/e994de10613640a6a602837f000a7842.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/0f686bde10974422aada0271992d7da4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[e6516f9745224e0b82195635f7c806aa.png]: https://img-blog.csdnimg.cn/e6516f9745224e0b82195635f7c806aa.png
[507c23c0376046e694700d504f179a2c.png]: https://img-blog.csdnimg.cn/507c23c0376046e694700d504f179a2c.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f9804c9e8ab6461d81f991ed30321e70.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_16,color_FFFFFF,t_70,g_se,x_16
[89d54d07271d4e8cab070fcbb5176d40.png]: https://img-blog.csdnimg.cn/89d54d07271d4e8cab070fcbb5176d40.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/669aba152ce943a289bec5c369d952f7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/9f7fd223d3d749d7b9a0f38e3e14a71c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16