Angular的环境搭建、创建项目以及运行项目

环境搭建

1.安装node.js
https://nodejs.org
安装angular的计算机上面必须安装最新的nodejs——注意安装nodejs稳定版本
安装完成后，打开cmd，输入node -v命令查看nodejs版本
输入npm -v查看npm的版本（nodejs安装之后npm就自动安装上了）
2.安装cnpm
npm可能安装失败建议先用npm安装一下cnpm用淘宝镜像安装
https://npm.taobao.org
可以直接将下面这句话复制到终端

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

3.使用npm/cnpm命令安装angular/cli（只需安装一次）
npm install -g @angular/cli 或者 cnpm install -g @angular/cli
4.输入ng v命令，出现下图的内容即说明angular环境搭建成功

创建项目

1.新建文件夹
首先创建一个文件夹放要创建的项目，然后打开命令行工具进入要创建项目的目录，我这里目录是：E:\angular
按以下步骤输入命令：

E
cd angular

2.创建项目

ng new 项目名称

在运行过程中可能会卡住，但是不是真正的卡住了，它正在安装依赖npm i，这个操作可能会成功，也可能会失败，这里可以Ctrl+C终止

ng new angularDemo

3.安装依赖
接下来可以输入cd angularDemo命令进入到创建的项目里，然后输入cnpm install安装依赖（npm也可以安装，但是很慢）
4.目录结构

e2e 端对端的测试目录 用于做自动化测试

​ node_modules 第三方依赖包

​ src 应用源代码目录（主战场）

​ app 包含应用的组件和模块目录

​ assets 资源目录

​ environments 环境配置目录（开发环境、测试环境、生产环境）

​ favicon icon图标

​ index.html 首页

​ main.ts 整个项目的入口，angular通过它来启动项目

​ polyfills.ts 用来导入一些必要的库文件，为了让angular能够运行在老版本下

​ styles.css 全局样式

​ test.ts 自动化测试

​ .editorconfig 配置文件

​ .gitignore git忽略提交的配置文件

​ angular.json angular命令行工具的配置文件

​ browserlist 兼容浏览器列表配置文件

​ karma.conf.js 单元测试执行器的配置文件

​ package.json 第三方依赖包配置文件

​ tsconfig.app.json typecript配置文件

​ tslint.json 用来定义typescript代码质量检查的规则

运行项目

输入ng serve --open或者npm start命令运行项目，编译完成后会打开一个浏览器（IE8不支持）

因为我没加–open参数，然后在浏览器输入http://localhost:4200/就能打开项目了
如果加上–open参数应该就可以自动打开浏览器

小tips：
1.编辑器推荐使用Visual Studio Code
https://code.visualstudio.com/
安装的Visual Studio Code是英文版，如何转换成中文版，点击下方链接查看
https://blog.csdn.net/qq_42572029/article/details/107523068
2.安装完Visual Studio Code后，打开Visual Studio Code将创建的项目导入编辑器，操作步骤如下：


这样就导入了项目
3.导入之后默认编辑器是没有任何提示的，如果想让编辑器提示我们angular代码，输入搜索angular，找到这个插件，点击安装即可