Comment démarrer manuellement un programme Angular ? Explication détaillée du démarrage manuel du programme angulairejs

Cet article présente principalement comment démarrer manuellement le programme angularjs Voici une explication détaillée de la façon de démarrer manuellement le programme angulairejs. Voyons maintenant comment démarrer manuellement le programme angulairejs<.>

La documentation officielle d'Angular indique que pour démarrer le programme Angular, le code suivant doit être écrit dans le fichier

 : main.ts

platformBrowserDynamic().bootstrapModule(AppModule);

Cette ligne de code

doit construire un platformBrowserDynamic() platform, la documentation officielle d'Angular définit comme (Note du traducteur : pour une compréhension claire, la définition de platform n'est pas traduite) : platform

le point d'entrée pour Angular sur une page Web. Chaque page a exactement une plate-forme, et les services (tels que la réflexion) qui sont communs à chaque application Angular exécutée sur la page sont liés dans sa portée.

En même temps, Angular a également

instances de programme en cours d'exécution (instance d'application en cours d'exécution) concept, vous pouvez utiliser la balise (jeton) comme injection de paramètres pour obtenir son instance. La définition ApplicationRef ci-dessus implique également qu'un platform peut avoir plusieurs platform objets, et chaque objet application est construit via application, et la méthode de construction est identique au fichier bootstrapModule ci-dessus tel qu'utilisé dans . Par conséquent, le code dans le fichier main.ts ci-dessus construit d'abord un objet main.ts et un objet platform. application

Lorsque l'objet

est en cours de construction, Angular vérifiera l'attribut application du module AppModule, qui est utilisé pour démarrer le programme : bootstrap

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

L'attribut contient généralement le composant utilisé pour démarrer le programme (Note du traducteur : le composant racine interrogera et fera correspondre le sélecteur du composant de démarrage dans le DOM, puis instanciera le composant de démarrage. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois bootstrapManuel de développement AngularJS pour en savoir)

Le processus de démarrage d'Angular implique quel composant vous souhaitez démarrer le programme, mais si le composant du programme de démarrage Que dois-je faire s'il est défini au moment de l'exécution ? Lorsque vous recevez le composant, comment démarrez-vous le programme ? C'est en fait un processus très simple.

NgDoBootstrap

Supposons que nous ayons deux composants,

et A, et nous allons coder pour déterminer quel composant utiliser pour démarrer le programme au moment de l'exécution. Tout d'abord, définissons-les. deux composants : 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 {}

Enregistrez ensuite ces deux composants dans

 : AppModule

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

Notez que parce que nous devons personnaliser le lanceur, il n'y a pas d'attribut

mais Register ces deux composants dans l'attribut bootstrap, et en enregistrant le composant dans entryComponents, le compilateur Angular (Note du traducteur : Angular fournit le package entryComponents@angular/compiler pour compiler le code angulaire que nous avons écrit, il également fournit des @angular/compiler-cli outils CLI) qui créeront des classes d'usine pour ces deux composants (Note du traducteur : lorsque Angular Compiler compile chaque composant, il convertira d'abord la classe de composant en classe Factory de composant correspondante, c'est-à-dire un.component. ts est compilé dans a.component.ngfactory.ts). Étant donné qu'Angular ajoutera automatiquement les composants enregistrés dans l'attribut à la liste des composants d'entrée, il n'est généralement pas nécessaire d'enregistrer le composant racine dans l'attribut bootstrap. (Note du traducteur : c'est-à-dire que les composants enregistrés dans l'attribut entryComponents n'ont pas besoin d'être enregistrés à plusieurs reprises dans bootstrap). entryComponents

Comme nous ne savons pas si le composant

ou A sera utilisé, nous ne pouvons pas spécifier le sélecteur dans B, donc index.html ressemble à ceci (Note du traducteur : nous Je ne sais pas si le serveur renvoie les informations sur les composants index.html ou A : B

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

Si vous exécutez le programme à ce moment-là, l'erreur suivante se produira :

Le module AppModule a été bootstrapé, mais il ne déclare pas de composants « @NgModule.bootstrap » ni de méthode « ngDoBootstrap ». Veuillez en définir un

Le message d'erreur nous indique qu'Angular se plaint que nous n'avons pas spécifié. quel composant utiliser pour démarrer le programme. Mais nous ne pouvons vraiment pas le savoir à l'avance (Note du traducteur : nous ne savons pas quand le serveur renverra quoi que ce soit). Plus tard, nous devons ajouter manuellement la méthode

à la classe AppModule pour démarrer le programme : ngDoBootstrap

export class AppModule {
  ngDoBootstrap(app) {  }
}

Angular passera

comme paramètre à ApplicationRef (Note du traducteur : reportez-vous à Angular Cette ligne dans le code source), lorsque vous êtes prêt à démarrer le programme, utilisez la méthode ngDoBootstrap de ApplicationRef pour initialiser le composant racine. bootstrap

Écrivons une méthode personnalisée

pour lancer le composant racine : bootstrapRootComponent

// 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使用手册中学习），有问题的可以在下方留言提问。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!