关于 Angular 应用的入口

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 文件中定义，该文件位于:

/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 数组，可以在其中放置特定于组件的样式表。