Angular笔记一——创建第一个Angular项目。

Angular介绍

Angular是谷歌开发的一款开源web框架,诞生于2009年,是一款优秀的前端JS框架,已经被用于Google的多款产品中。

Angular基于TypeScript和react、vue相比更适合中大型企业级项目

环境搭建

  1. 安装nodejs。
  2. 安装cnpm。

(之前的nodejs笔记有讲解如何安装)

  1. 使用npm/cnpm命令安装angular/cli(只需要安装一次
cnpm install -g @angular/cli

(mac前需要加sudo)

  1. 输入ng v检查。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SlVarSn6-1603979768294)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记一/1.jpg)]

创建Angular项目

  1. 创建项目名称:
ng new angulerdemo01
ng new angulerdemo01 --skip-install

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0YFul9z6-1603979768297)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记一/2.jpg)]

会弹出提示是否添加路由,一般必须添加,但是我们第一个项目只是学习如何创建就不添加了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5R9bHQRb-1603979768298)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记一/3.jpg)]

选择预处理器

  1. 安装依赖。
cnpm install

默认通过npm install安装依赖,我们通过ctrl + c停止,再进入我们刚创建的目录angulardemo01,使用cnpm安装依赖。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nF4JWn2t-1603979768303)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记一/4.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pFUDz8GN-1603979768304)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记一/5.jpg)]

  1. 启动。
ng serve --open

加载完成后会自动跳转到浏览器。

在这里插入图片描述
在这里插入图片描述

到此为止angular的项目就创建成功了。

使用vscode打开

打开vscode选择刚才的angulardemo01为工作文件夹。

再添加工具。
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_46351593/article/details/109371787