这是一个在Angular中，利用Angular CLI來建立最基礎的應用，在此詳細的介紹一下目錄結構。
Angular基礎目錄結構
这是一个在Angular中，利用Angular CLI來建立最基礎的應用，在此詳細的介紹一下目錄結構。
Angular-demo
# 必要的话，安装 Angular CLI npm install -g @angular/cli # 利用Angular CLI來建立最基礎的應用 ng new angular-demo # 編譯此應用，並運行此應用 ng serve
现在你可以在浏览器中打开( http://localhost:4200 )开始体验。
Directory Layout
接者，我們了解一下項目目錄的結構︰
. ├── /dist/ # 编译生成的目录 ├── /e2e/ # 端到端测试，用来做自动测试的 ├── /node_modules/ # 第三方依赖包存放目录 ├── /src/ # 应用源代码目錄 │ ├── /app/ # 本應用的源码 │ │ ├── /app.component.html # 根组件的模板 │ │ ├── /app.component.scss # 根组件的样式 │ │ ├── /app.component.spec.ts # 根组件的单元测试 │ │ ├── /app.component.ts # 根组件 │ │ └── /app.modules.ts # 根模块 │ ├── /assets/ # 静态文件，编译时会被复制到 /dist 目录 │ ├── /environments/ # 包含环境配置文件 │ │ ├── /environment.prod.ts # 生产环境配置文件 │ │ └── /environment.ts # 开发环境配置文件 │ ├── /favicon.ico # Angular icon │ ├── /index.html # HTML页面，程序启动就是访问这个页面 │ ├── /main.ts # 应用的入口文件，Angular通过这个文件来启动项目 │ ├── /polyfills.ts # 主要是用来导入一些必要库，为了让Angular能正常运行在老版本下 │ ├── /styles.scss # 应用的全局样式 │ └── /test.ts # 应用的单元测试入口 ├── .editorconfig # 编辑器的配置 ├── .gitignore # Git 忽略文件 ├── angular.json # Angular命令行工具的配置文件 ├── browserslist # 一個配置文件，用來在不同的前端工具之間共享目標瀏覽器 ├── karma.conf.js # karma是单元测试的执行器，此檔案是karma的配置文件 ├── package-lock.json # ├── package.json # npm工具的配置文件 ├── README.md # 說明文档 ├── tsconfig.app.json # TypeScript 编译器的應用配置 ├── tsconfig.json # TypeScript 编译器的配置 ├── tsconfig.spec.json # TypeScript 编译器的单元测试的配置 └── tslint.json # TSLint 和 Codelyzer 的配置
Src
src 應用程式源代碼的目錄。
| /app/ | 本應用的源码，我们要写的代码都在这个目录。 | |
|---|---|---|
| app.component.html | 根組件的模板。 | |
| app.component.scss | 根组件的样式。 | |
| app.component.spec.ts | 根组件的单元测试。 | |
| app.component.ts | 根组件。 | |
| app.modules.ts | 根模块。 | |
| /assets/ | 静态文件，编译时会被复制到 /dist 目录，即资源目录，存储静态资源的，比如图片。 | |
| /environments/ | 包含环境配置文件。Angular是支持多环境开发的，我们可以在不同的环境下（开发环境，测试环境，生产环境）共用一套代码，主要用来配置环境的。 | |
| environment.prod.ts | 生产环境配置文件。 | |
| environment.ts | 开发环境配置文件。 | |
| favicon.ico | 此應用的favicon。 | |
| index.html | HTML页面，程序启动就是访问这个页面。 | |
| main.ts | 应用的入口文件，Angular通过这个文件来启动项目。默认配置无需更改，只有在特殊情况下，比如热部署等情况下需要更改。 | |
| polyfills.ts | 主要是用来导入一些必要库，为了让Angular能正常运行在老版本下。这个文件包含了Angular项目运行和加载前所需要的core-js中的相关es模块，默认即可。 | |
| styles.scss | 应用的全局样式。区别在于你创建Angular项目时采用何种样式文件来作为Angular项目的全局样式文件。默认在Angular.json 中"build"变量下的"options"变量的"styles"中导入，否则无法生效，并可在"schematics"中修改到底选择何种文件来作为全局样式。 | |
| test.ts | 应用的单元测试入口。 |
EditConfig
.editorconfig 編輯器的配置。
Git
.gitignore Git的忽略文件的設置，建議要好好的設定，以免將敏感文檔給不小心上傳到GitHub了。
Angular CLI
angular.json Angular命令行工具的配置文件。后期可能会去修改，引一些其他的第三方的包，比如jquery等。根目录中最为重要的无非是上文所讲到的Angular.json以及项目的版本管理文件package.json了。Angular.json，Angular5以前为Angular-cli.json，其作用显而易见，是Angular项目中的配置文件，包含一系列的项目、限制、环境配置等，具体作用在上文已得到体现，是与ng build、serve、lint等指令相配合的命令。除去这些环境配置，还有一些比如在build中大小警告或报错的预算配置，默认为2mb警告，10mb抛出错误，如在使用ng build --prod指令打包时提示内存警告或者报错，则可以酌情修改该变量配置。
npm
package.json 这是一个标准的npm工具的配置文件，这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候，等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中，后期我们可能会修改这个文件。package.json文件时整个项目中的管理文件，其中包括项目名称、版本、许可、脚本、依赖包、开发依赖包等内容。可以看到除去name、version外，默认情况下常见的有scripts，这里是脚本命令配置，node.js的运行指令npm调用的就是这里的命令集，如果在开发工具中例如idea，还可以快速启动。
通俗来讲当我们使用npm工具输入命令npm run xxx 这个xxx就是在scripts中定义的脚本名称，然后这个xxx中的内容就是我们运行的内容，如上图“start”脚本对应的是 Angular/cli指令 “ng serve --port 4201”，那么它就等同于我们在控制台中输入 这个Angular/cli指令,区别只是使用的方式不同，并且可以从开发工具中快速启动。那么我们就可以编辑各种不同的指令，来通过npm 工具来快速运行复杂的Angular/cli指令以及应对不同的情况，同时可以使用开发工具的快速启动按钮，提高效率以及代码git化后其他开发人员的使用效率。
“dependencies”，这里是依赖包，其作用就是版本管理，我们导入不同的依赖库以及它的版本，然后测试稳定度，是否可运行，还有想要更新重大版本，比如Angular的更新以及其第三方ui框架等等的更新时，都需要操作package.json。这里的内容，也是npm install时所安装的node_modules的指示文件，npm工具会按照依赖内容来从npm仓库中下载这些依赖模块。Angular7的更新可以使用ng update来进行更新检测，但是多数情况下，各个包的依赖关系并不明确，Angular/cli工具自带的更新机制也并不是特别好用，在Angular5版本以及以前的版本中升级会有巨大的问题，因为Angular5和Angular6的更新中，rxjs换了包名和引用路径，但是提供了兼容包，Angular也进行大幅度的修改，所以更新指令并不适用，如果已有项目从Angular5升级到6，需要考虑已有项目的引用包，手动去操作package.json中的内容，在处理很多的问题后才能升级成功，Angular6版本之后的升级则是容易很多，所以还是比较推荐了解自己项目引用了什么框架、第三方包之后，才能对这些依赖进行好的整理和升级。
“devDependencies”，是Angular代码开发中需要的内容，常见的有Angular/cli工具、typescript、tslint等等开发依赖包,一般也无需修改，只有在Angular版本升级的时候可能进行修改。
UnitTest
karma.conf.js karma是单元测试的执行器，karma.conf.js是karma的配置文件。
TypeScript Complier
tsconfig.app.json TypeScript 编译器的應用配置。默认情况下继承自tsconfig.json,只在其基础上增加了Angular的一些指令。大多数情况下无需对其进行修改，只有在某些特定情况下，比如Angular5以前的模块懒加载，需要将模块的路径包含在“include”变量下才可找到模块。
tsconfig.json TypeScript 编译器的配置，添加第三方依赖的时候会修改这个文件。
tsconfig.spec.json 编译器的单元测试的配置。
tslint.json TSLint 和 Codelyzer 的配置，主要是tslint的配置文件，用来定义TypeScript代码质量检查的规则。tslint.json为ts代码约束文件，作用类似于定义代码的规范，比如常见的变量未定义而调用，方法未结束，代码语法错误等等，这些都会引起idea等代码编辑器报错，还有些警告，一般情况下默认即可。但是当我们想要修改时，也可以找到具体的根目录tslint.json文件，修改一些不符合自己使用习惯的报错，比如很常见的无空格报错。
Category
Angular
Keywords
Modern Web / Angular
License
angular-demo 使用 MIT 许可证发布。 详情请进入 LICENSE 查看。
Skyfu160
