Wie starte ich ein Angular-Programm manuell? Ausführliche Erklärung zum manuellen Starten des AngularJS-Programms

In diesem Artikel wird hauptsächlich beschrieben, wie das Programm angularjs manuell gestartet wird. Sehen wir uns nun an, wie man das Programm anglejs manuell startet 🎜>

Die offizielle Dokumentation von Angular besagt, dass zum Starten des Angular-Programms der folgende Code in die

-Datei geschrieben werden muss: main.ts

platformBrowserDynamic().bootstrapModule(AppModule);

Diese Codezeile

dient zum Erstellen eines platformBrowserDynamic()platform, die offizielle Dokumentation von Angular definiert als (Anmerkung des Übersetzers: Zum besseren Verständnis wird die Definition von platform nicht übersetzt): platform

der Einstiegspunkt für Angular Eine Webseite verfügt über genau eine Plattform, und Dienste (z. B. Reflection), die allen auf der Seite ausgeführten Angular-Anwendungen gemeinsam sind, sind an ihren Umfang gebunden.

Gleichzeitig verfügt Angular auch über

laufende Anwendungsinstanz) -Konzept: Sie können das -Token (Token) als Parameterinjektion verwenden, um seine Instanz zu erhalten. Die obige ApplicationRef-Definition impliziert auch, dass ein platform mehrere platform-Objekte haben kann und jedes application-Objekt durch application erstellt wird und die Konstruktionsmethode genau der obigen bootstrapModule-Datei entspricht, wie sie in verwendet wird . Daher erstellt der Code in der main.ts-Datei oben zunächst ein main.ts-Objekt und ein platform-Objekt. application

Wenn das

-Objekt erstellt wird, überprüft Angular das application-Attribut des Moduls AppModule, das zum Starten des Programms verwendet wird: bootstrap

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

-Attribut Enthält normalerweise die zum Starten des Programms verwendete Komponente (Anmerkung des Übersetzers: Die Root-Komponente fragt den Selektor der Startkomponente im DOM ab und instanziiert dann die Startkomponente). (Wenn Sie mehr erfahren möchten, besuchen Sie die chinesische PHP-Website bootstrapAngularJS-Entwicklungshandbuch , um mehr zu erfahren)

Der Angular-Startvorgang impliziert, welche Komponente Sie das Programm starten möchten, aber ob die Komponente des Startprogramms Was soll ich tun, wenn es zur Laufzeit definiert wird? Wie starten Sie das Programm, wenn Sie die Komponente erhalten? Es ist eigentlich ein sehr einfacher Prozess.

NgDoBootstrap

Angenommen, wir haben zwei Komponenten,

und A, und wir werden codieren, um zu bestimmen, welche Komponente zum Starten des Programms zur Laufzeit verwendet werden soll. Definieren wir diese zunächst zwei Komponenten: B

import { Component } from '@angular/core';

@Component({
  selector: 'a-comp',
  template: `<span>I am A component</span>`
})
export class AComponent {}

@Component({
  selector: 'b-comp',
  template: `<span>I am B component</span>`
})
export class BComponent {}

Dann registrieren Sie diese beiden Komponenten in

: AppModule

@NgModule({
  imports: [BrowserModule],
  declarations: [AComponent, BComponent],
  entryComponents: [AComponent, BComponent]
})
export class AppModule {}

Beachten Sie, dass es kein

-Attribut, sondern das bootstrap-Attribut gibt, da wir den Launcher anpassen müssen Registrieren Sie diese beiden Komponenten in entryComponents und registrieren Sie die Komponente in entryComponents, dem Angular-Compiler (Anmerkung des Übersetzers: Angular stellt das Paket @angular/compiler zum Kompilieren des von uns geschriebenen Angular-Codes bereit und stellt auch Folgendes bereit @angular/compiler-cli CLI-Tool) erstellt Factory-Klassen für diese beiden Komponenten (Anmerkung des Übersetzers: Wenn Angular Compiler jede Komponente kompiliert, konvertiert er zunächst die Komponentenklasse in die entsprechende Komponenten-Factory-Klasse, d. h. a. Component.ts wird in a.component.ngfactory.ts kompiliert. Da Angular im Attribut bootstrap registrierte Komponenten automatisch zur Eintragskomponentenliste hinzufügt, ist es normalerweise nicht erforderlich, die Stammkomponente im Attribut entryComponents zu registrieren. (Anmerkung des Übersetzers: Das heißt, Komponenten, die im Attribut bootstrap registriert sind, müssen nicht wiederholt in entryComponents registriert werden.)

Da wir nicht wissen, ob die Komponente A oder B verwendet wird, können wir den Selektor in index.html nicht angeben, sodass index.html so aussieht (Anmerkung des Übersetzers: Wir Ich weiß nicht, ob der Server A oder B Komponenteninformationen zurückgibt):

<body>
  <h1 id="status">
     Loading AppComponent content here ...
  </h1>
</body>

Wenn Sie das Programm zu diesem Zeitpunkt ausführen, tritt der folgende Fehler auf:

Das Modul AppModule wurde gebootet, deklariert jedoch weder „@NgModule.bootstrap“-Komponenten noch eine „ngDoBootstrap“-Methode. Bitte definieren Sie eine davon.

Die Fehlermeldung sagt uns, dass Angular sich darüber beschwert, dass wir nicht angegeben haben, welche Komponente um das Programm zu starten, aber wir Es ist in der Tat unmöglich, es im Voraus zu wissen (Anmerkung des Übersetzers: Wir wissen nicht, wann der Server etwas zurückgeben wird). Später müssen wir die Methode AppModule manuell zur Klasse ngDoBootstrap hinzufügen, um das Programm zu starten:

export class AppModule {
  ngDoBootstrap(app) {  }
}

Angular übergibt ApplicationRef als Parameter an ngDoBootstrap (Anmerkung des Übersetzers: Siehe Angular Quellcode Diese Zeile), wenn Sie bereit sind, das Programm zu starten, verwenden Sie die ApplicationRef-Methode von bootstrap, um die Root-Komponente zu initialisieren.

Lassen Sie uns eine benutzerdefinierte Methode bootstrapRootComponent schreiben, um die Root-Komponente zu starten:

// app - reference to the running application (ApplicationRef)
// name - name (selector) of the component to bootstrap
function bootstrapRootComponent(app, name) {
  // define the possible bootstrap components 
  // with their selectors (html host elements)
  // （译者注：定义从服务端可能返回的启动组件数组）
  const options = {
    'a-comp': AComponent,
    'b-comp': BComponent
  };
  // obtain reference to the DOM element that shows status
  // and change the status to `Loaded` 
  //（译者注：改变 id 为 #status 的内容）
  const statusElement = document.querySelector('#status');
  statusElement.textContent = 'Loaded';
  // create DOM element for the component being bootstrapped
  // and add it to the DOM
  // （译者注：创建一个 DOM 元素）
  const componentElement = document.createElement(name);
  document.body.appendChild(componentElement);
  // bootstrap the application with the selected component
  const component = options[name];
  app.bootstrap(component); // （译者注：使用 bootstrap() 方法启动组件）
}

传入该方法的参数是 ApplicationRef 和启动组件的名称，同时定义变量 options 来映射所有可能的启动组件，并以组件选择器作为 key，当我们从服务器中获取所需要信息后，再根据该信息查询是哪一个组件类。

先构建一个 fetch 方法来模拟 HTTP 请求，该请求会在 2 秒后返回 B 组件选择器即 b-comp 字符串：

function fetch(url) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('b-comp');
    }, 2000);
  });
}

现在我们拥有 bootstrap 方法来启动组件，在 AppModule 模块的 ngDoBootstrap 方法中使用该启动方法吧：

export class AppModule {
  ngDoBootstrap(app) {
    fetch('url/to/fetch/component/name')
      .then((name)=>{ this.bootstrapRootComponent(app, name)});
  }
}

这里我做了个 stackblitz demo 来验证该解决方法。（译者注：译者把该作者 demo 中 angular 版本升级到最新版本 5.2.9，可以查看 angular-bootstrap-process，2 秒后会根据服务端返回信息自定义启动 application）

在 AOT 中能工作么？

当然可以，你仅仅需要预编译所有组件，并使用组件的工厂类来启动程序：

import {AComponentNgFactory, BComponentNgFactory} from './components.ngfactory.ts';
@NgModule({
  imports: [BrowserModule],
  declarations: [AComponent, BComponent]
})
export class AppModule {
  ngDoBootstrap(app) {
    fetch('url/to/fetch/component/name')
      .then((name) => {this.bootstrapRootComponent(app, name);});
  }
  bootstrapRootComponent(app, name) {
    const options = {
      'a-comp': AComponentNgFactory,
      'b-comp': BComponentNgFactory
    };
    ...

记住我们不需要在 entryComponents 属性中注册组件，因为我们已经有了组件的工厂类了，没必要再通过 Angular Compiler 去编译组件获得组件工厂类了。（译者注：components.ngfactory.ts 是由 Angular AOT Compiler 生成的，最新 Angular 版本 在 CLI 里隐藏了该信息，在内存里临时生成 xxx.factory.ts 文件，不像之前版本可以通过指令物理生成这中间临时文件，保存在硬盘里。）

好了，本篇文章到这就结束了（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。

Das obige ist der detaillierte Inhalt vonWie starte ich ein Angular-Programm manuell? Ausführliche Erklärung zum manuellen Starten des AngularJS-Programms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!