ANGULAR.JSON 是蕴含 Angular 我的项目的各种属性和配置的文件。这是构建器首先援用的文件,用于查找所有门路和配置并查看哪个是主文件。上面是一个 hello-world 应用程序的 angular.json 文件,在 build 局部下,能够看到如下选项对象:

"options":{      "outputPath":"dist/hello-world",    "index":"src/index.html",    "main":"src/main.ts",  // THIS LINE    "polyfills":"src/polyfills.ts",    "tsConfig":"src/tsconfig.app.json",    "assets":[         "src/favicon.ico",       "src/assets"     ],    "styles":[         "node_modules/bootstrap/dist/css/bootstrap.min.css",       "src/styles.css"     ],    "scripts":[],    "es5BrowserSupport":true}

它有一个对 main.ts 文件的援用,该文件通知构建器从哪里启动应用程序。

main.ts

该文件充当应用程序的入口点。

这个入口点是在 Angular 用来反对模块化性能的 webpack 外部定义的。

main.ts 的门路/名称能够更改,但也应在 angular.json 文件中更改。

main.ts 有助于为利用程序运行创立浏览器环境。

这是通过以下形式实现的:

import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;

在此之后,main.ts 文件调用函数 bootstrapModule(AppModule) 通知构建器疏导应用程序。

platformBrowserDynamic().bootstrapModule(AppModule)

app.module.ts

从 main.ts 文件中能够分明地看出,咱们正在应用 AppModule 疏导应用程序。 此 AppModule 在 APP.MODULE.TS 文件中定义,该文件位于:

<project_directory>/src/app/app.module.ts

这是应用 @NgModule 装璜器创立的模块,它蕴含咱们在 app 模块中创立的所有组件的申明,以便 Angular 可能辨认它们。 在这里,咱们还有 imports 数组,咱们能够在其中导入其余模块并在咱们的应用程序中应用。

上面是一个 app.module.ts 文件的示例,其中申明了一个测试组件并导入了两个模块。

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms';import { AppComponent } from './app.component';import { TestComponent } from './test/test.component';@NgModule({   declarations: [      AppComponent,      TestComponent   ],   imports: [      BrowserModule,      FormsModule   ],   providers: [],   bootstrap: [AppComponent]})export class AppModule { }

AppComponent

从下面的 app.module.ts 文件中,咱们能够分明地看到模块要求疏导应用程序组件。

这个应用程序组件在 app.component.ts 文件中。

这是与网页的 html 交互并为它提供数据的文件。

该组件是应用从@angular/core 导入的@Component 装璜器制作的。 该组件有一个选择器,就像一个自定义的 html 标签,咱们能够应用它来调用该组件。

而后它有 template 或 templateUrl,其中蕴含要显示的页面的 html。 它还具备 styleUrls 数组,能够在其中搁置特定于组件的样式表。