Maison > Article > interface Web > 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
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
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 bootstrap
Manuel de développement AngularJS pour en savoir)
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
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 unLe 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
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
)
当然可以,你仅仅需要预编译所有组件,并使用组件的工厂类来启动程序:
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!