项目目录结构

目录结构

目录结构

File 文件 Purpose 用途
favicon.ico 网站在书签栏显示的图标
index.html 这是别人访问你的网站是看到的主页面的HTML文件。 大多数情况下你都不用编辑它。
main.ts 这是应用的主要入口点。启动根模块AppModule,使其运行在浏览器中。
polyfills.ts 不同的浏览器对Web标准的支持程度也不同。 填充库(polyfill)能帮我们把这些不同点进行标准化。
styles.css 全局样式。
test.ts 这是单元测试的主要入口点。
tsconfig.app.json,tsconfig.spec.json TypeScript编译器的配置文件。tsconfig.app.json是为Angular应用准备的,而tsconfig.spec.json是为单元测试准备的。
.angular.json Angular CLI的配置文件。 在这个文件中,我们可以设置一系列默认值,还可以配置项目编译时要包含的那些文件。
.editorconfig 给你的编辑器看的一个简单配置文件,它用来确保参与你项目的每个人都具有基本的编辑器配置。
.gitignore 一个Git的配置文件,用来确保某些自动生成的文件不会被提交到源码控制系统中。
karma.conf.js 给Karma的单元测试配置,当运行ng test时会用到它。
package.json npm配置文件,其中列出了项目使用到的第三方依赖包。
protractor.conf.js 给Protractor使用的端到端测试配置文件。
tsconfig.json TypeScript编译器的配置
tslint.json 给TSLint和Codelyzer用的配置信息,当运行ng lint时会用到。 Lint功能可以帮你保持代码风格的统一。

app.module.ts说明

app.module.ts的@NgModule中有一些引入,分别是:

  • 静态的:编译器配置,用于告诉编译器指令的选择器并通过选择器匹配的方式决定要把该指令应用到模板中的什么位置。它是通过 declarations 数组来配置的。

  • 运行时:通过 providers 数组提供给注入器的配置。

  • 组合/分组:通过 imports 和 exports 数组来把多个 NgModule 放在一起,并让它们可用。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
@NgModule({
  // Static, that is compiler configuration
  declarations: [], // Configure the selectors
  entryComponents: [], // Generate the host factory

  // Runtime, or injector configuration
  providers: [], // Runtime injector configuration

  // Composability / Grouping
  imports: [], // composing NgModules together
  exports: [] // making NgModules available to other parts of the app
})