[Angular] Angular项目文件概览（二）

首先，来看一下根目录下都包含哪些东西：

➜  my-app git:(master) ✗ tree -L 1 -a.├── .DS_Store├── .angular-cli.json├── .editorconfig├── .git├── .gitignore├── README.md├── e2e├── karma.conf.js├── node_modules├── package.json├── protractor.conf.js├── src├── tsconfig.json└── tslint.json4 directories, 10 files

README.md 这是项目说明文件，这里默认写的是Angular CLI的一些基本操作命令，以方便开发者快速上手。

e2e/ 端到端测试，适用于测试应用。

karma.conf.js 给Karma的单元测试配置，当运行 ng test 时会用到它。

node_modules/ 这里存放的都是npm安装的依赖包。

package.json npm 配置文件，其中列出了项目使用到的第三方依赖包。 你还可以在这里添加自己的自定义脚本。

protractor.conf.js 给Protractor使用的端到端测试配置文件，当运行 ng e2e 的时候会用到它。

src/ 存放你的应用代码。

tsconfig.json TypeScript编译器的配置，你的IDE会借助它来给你提供更好的帮助。

tslint.json 给TSLint和Codelyzer用的配置信息，当运行 ng lint 时会用到。 Lint功能可以帮你保持代码风格的统一。

对于项目来说，最主要的就是 src/ 目录了，下面我们来看一下这个目录的构成：

➜  src git:(master) ✗ tree -Ca.├── app│   ├── app.component.css│   ├── app.component.html│   ├── app.component.spec.ts│   ├── app.component.ts│   └── app.module.ts├── assets│   └── .gitkeep├── environments│   ├── environment.prod.ts│   └── environment.ts├── favicon.ico├── index.html├── main.ts├── polyfills.ts├── styles.css├── test.ts├── tsconfig.app.json├── tsconfig.spec.json└── typings.d.ts3 directories, 17 files

app/app.component.* 根组件，这个项目的出发点

app/app.module.ts 定义 AppModule ，这个 根模块 会告诉Angular如何组装该应用。 目前，它只声明了 AppComponent 。 稍后它还会声明更多组件。

assets/* 这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。

environments/* 这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。 比如你可能在产品环境中使用不同的API端点地址，或使用不同的统计Token参数。 甚至使用一些模拟服务。 所有这些，CLI都替你考虑到了。

favicon.ico 网站导航栏上的小图标。

index.html 网站的入口，一般情况下Angular CLI会自动填写相应的链接文件，所以基本上并不需要修改。

main.ts 应用的主要入口点。

polyfills.ts 不同的浏览器对Web标准的支持程度也不同。 填充库（polyfill）能帮我们把这些不同点进行标准化。 你只要使用core-js 和 zone.js通常就够了。

styles.css 保存全局样式，局部样式可以写在对应的组件里。

test.ts 单元测试的主要入口点，不需要编辑这里的东西。

tsconfig.*.json TypeScript编译器的配置文件。 tsconfig.app.json 是为Angular应用准备的，而 tsconfig.spec.json 是为单元测试准备的。

typings.d.ts 标记 js 库里面对象的类型。

参考资料：

Angular.cn