Об угловой загрузке - PullRequest
Новая
       2

Об угловой загрузке

0 голосов
/ 27 апреля 2018

Очень простой угловой материал:

приложение / app.component.ts 

import { Component } from '@angular/core'

@Component({
    selector: 'app-root',
    template: '<b>Bootstrapping an Angular Application</b>'
})
export class AppComponent { }

index.html 

<body>
    <app-root>Loading...</app-root>
</body>

приложение / app.module.ts 

import { BrowserModule }  from '@angular/platform-browser';
import { NgModule } '@angular/core';
import { AppComponent } from './app.component'

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
}

приложение / main.ts 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Однако я не могу понять, как вызывается main.ts, когда встречается <app-root> в index.html . Может кто-нибудь объяснить, что происходит под капотом? Другими словами, как <app-root> запускает самозагрузку?

1 Ответ

0 голосов
/ 27 апреля 2018

Позвольте мне ответить на это по пунктам.

  1. Перед отображением в браузере компилируется угловой код (разметка HTML, CSS, Script - в основном это TypeScript). Это угловой процесс компиляции.

  2. Угловые модули - это важные связующие элементы приложения Angular, которые помогают нам организовать наше приложение в единые блоки функциональности и обеспечить границы внутри нашего приложения.

  3. Угловые модули обеспечивают среду разрешения шаблонов.

  4. Теперь любой пользовательский элемент HTML также называется директивой. Так было со времен Angular JS. Здесь «app-root» является директивой.

  5. Теперь ваш вопрос - как "app-root" пинается в процессе. Я перефразирую вопрос следующим образом: как угловой компилятор узнает, как заменить "app-root" на HTML, определенный шаблоном ? Ответ: Когда Angular-компилятор видит директиву в шаблоне, он ищет модуль Angular для определения, поэтому мы объявляем AppComponent в модуле Angular, чтобы компилятор мог его найти. Здесь есть только один модуль, AppModule, и даже в приложении с несколькими модулями есть один модуль, который запускает - AppModule.

  6. Как происходит кикстарт? Итак, файл main.ts, который снова используется компилятором Angular, чтобы сообщить ему, какой модуль является первым, который инициализируется следующим фрагментом кода

    platformBrowserDynamic (). BootstrapModule (AppModule)

  7. Как только модуль известен, модуль самозагружается со всеми параметрами и свойствами в своих объявлениях, импорте и поставщиках.

Надеюсь, это объясняет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...