探索 Angular 应用
我们来观察下新建的hello-world应用。
src 文件夹
应用的代码都位于 src 文件夹中。所有的 Angular 组件、模板、样式、图片以及你的应用所需的任何东西都在那里。这个文件夹之外的文件都是为构建应用提供支持用的。
src目录结构如下：
src
│ browserslist
│ favicon.ico
│ index.html
│ karma.conf.js
│ main.ts
│ polyfills.ts
│ styles.css
│ test.ts
│ tsconfig.app.json
│ tsconfig.spec.json
│ tslint.json
│
├─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
其中，各文件用途如下：
| 文件 | 用途 |
|---|---|
| app/app.component.{ts,html,css,spec.ts} | 使用 HTML 模板、CSS 样式和单元测试定义 AppComponent 组件。 它是根组件，随着应用的成长它会成为一棵组件树的根节点。 |
| app/app.module.ts | 定义 AppModule，根模块为 Angular 描述如何组装应用。 |
| assets/* | 这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。 |
| environments/* | 这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。 比如你可能在生产环境中使用不同的 API 端点地址，或使用不同的统计 Token 参数。 甚至使用一些模拟服务。 所有这些，CLI 都替你考虑到了。 |
| browserslist | 一个配置文件，用来在不同的前端工具之间共享目标浏览器。 |
| favicon.ico | 每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。 |
| index.html | 这是别人访问你的网站是看到的主页面的 HTML 文件。 大多数情况下你都不用编辑它。 在构建应用时，CLI 会自动把所有 js 和 css 文件添加进去，所以你不必在这里手动添加任何 |