[TOC]

探索 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 文件添加进去,所以你不必在这里手动添加任何