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

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