关于前端:关于-Angular-应用的入口

50次阅读

共计 1712 个字符，预计需要花费 5 分钟才能阅读完成。

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 文件的援用，该文件通知构建器从哪里启动应用程序。

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

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

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

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

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

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

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

platformBrowserDynamic().bootstrapModule(AppModule)

从 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 {}

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

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

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

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

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

正文完