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 数组,能够在其中搁置特定于组件的样式表。