Angular 项目目录结构和文件详细介绍

Lasted 2020-11-26 20:41:34

Angular CLI: 10.2.0。

运行 Angular CLI 命令 ng new 默认会创建一个骨架应用及端到端测试项目。它可以运行,也很容易修改。这个根应用与工作空间同名,其源文件位于工作空间的 src/ 子文件夹中。

创建项目

ng new ng-project

目录结构如下所示:

├─ .browserslistrc  # 配置目标浏览器和 Node.js 版本。
├─ .editorconfig  # 代码编辑器的配置。
├─ .gitignore     # Git 忽略的不必追踪的文件。
├─ angular.json   # 指定 CLI 的配置。
├─ package.json   # 项目依赖的 npm 包。
├─ tslint.json    # TSLint 配置。
├─ tsconfig.json  # 项目的默认 TypeScript 配置。
├─ README.md      # README文件。
├─ karma.conf.js  # 应用专属的 Karma 配置。
├─ package-lock.json   # 安装到本地软件包的版本信息。
├─ tsconfig.app.json   # 应用专属的 TypeScript 配置。
├─ tsconfig.spec.json  # 测试的 TypeScript 配置。
├─ src            # 根项目的源文件。
│  └ app          # 应用逻辑和数据的组件文件。
│    ├─ app.module.ts # AppModule 的根模块。
│    ├─ app.component.ts # 定义应用的根组件和逻辑。
│    ├─ app.component.html # 组件模板文件。
│    ├─ app.component.scss # 组件CSS 样式表。
│    ├─ app-routing.module.ts # 路由配置文件。
│    └─ app.component.spec.ts # 组件单元测试。
├─ assets  # 图像和其它静态资源文件。
├─ environments # 环境的构建配置选项。
│  ├ environment.prod.ts # 生产环境构建选项。
│  └ environment.ts # 非生成环境构建选项。
├─ index.html  # 主要 HTML 页面。
├─ main.ts     # 应用入口文件。
├─ styles.scss # 项目 CSS 文件。
├─ test.ts     # 单元测试入口。
├─ polyfills.ts # 浏览器腻子(polyfill)脚本。
├─ index.html  # 图像和其它静态资源文件。
└─ e2e         # 端到端测试文件
   ├ src
   │ ├ app.e2e-spec.ts
   │ └ app.po.ts
   ├ protractor.conf.js
   └ tsconfig.json