安装 Node.js

• 安装 Node.js
• Node.js 下载地址
• Node.js 历史版本

• 检测 node 版本

node -v

• 检测 npm 版本

npm -v

• 替换淘宝镜像（解决下载缓慢的问题）

npm config set registry https://registry.npm.taobao.org

安装 Angular CLI

• 安装 Angular CLI
• (当遇到权限不足的问题时，在命令前加上 sudo，并输入密码即可)
• (推荐指定版本，如@16.0.0，DevUI当前支持^16.0.0)

sudo npm install -g @angular/cli@16.0.0

• 检测 Angular 版本

ng version

• 创建 demo_angular 项目

ng new demo_angular

典型的Angular项目结构

/src
|-- /app
|   |-- /core
|   |   |-- /services
|   |   |-- /interceptors
|   |   |-- /models
|   |   |-- /guards
|   |   |-- core.module.ts
|   |
|   |-- /shared
|   |   |-- /components
|   |   |-- /directives
|   |   |-- /pipes
|   |   |-- shared.module.ts
|   |
|   |-- /modules
|   |   |-- /feature-module1
|   |   |   |-- /components
|   |   |   |-- /services
|   |   |   |-- feature-module1.module.ts
|   |   |
|   |   |-- /feature-module2
|   |   |   |-- /components
|   |   |   |-- /services
|   |   |   |-- feature-module2.module.ts
|   |   |
|   |   |-- /feature-module3
|   |       |-- /components
|   |       |-- /services
|   |       |-- feature-module3.module.ts
|   |
|   |-- app.component.ts
|   |-- app.module.ts
|   |-- app-routing.module.ts
|
|-- /assets
|-- /environments
|-- index.html
|-- styles.scss
|-- main.ts
|-- polyfills.ts
|-- tsconfig.app.json
|-- tsconfig.json
|-- angular.json
|-- package.json
|-- karma.conf.js
|-- protractor.conf.js

• /core: 该目录包含与应用程序的核心功能相关的内容，例如服务、拦截器、模型和守卫等。这是一个可重用和独立于特定功能模块的区域。
• /shared: 该目录包含多个功能模块之间共享的组件、指令和管道等。通过创建共享模块，你可以更容易地管理和维护这些共享资源。
• /modules: 该目录包含应用程序的不同功能模块，每个模块都有自己的组件、服务等。每个特性模块都应该有自己的文件夹，以便更好地组织代码。
• app.component.ts: 应用程序的主组件。
• app.module.ts: Angular应用的主模块，其中包含应用的根组件和其他模块。
• app-routing.module.ts: Angular路由模块，用于定义应用程序的导航。
• assets: 存放应用程序使用的静态资源，如图像、字体等。
• environments: 存放不同环境的配置文件。
• styles.scss: 应用的全局样式文件。
• main.ts: 应用程序的入口文件。
• polyfills.ts: 提供对不同浏览器的兼容性支持。
• tsconfig.app.json, tsconfig.json, angular.json, package.json: TypeScript和Angular的配置文件。
• karma.conf.js, protractor.conf.js: 单元测试和端到端测试的配置文件。