如何手动启动 Angular 程序？手动启动angularjs程序的详细解释-js教程-PHP中文网

NgDoBootstrap

在 AOT 中能工作么？

首页

web前端

js教程

如何手动启动 Angular 程序？手动启动angularjs程序的详细解释

寻∝梦

Sep 07, 2018 pm 04:52 PM

angular.js typescript

本篇文章主要的向大家介绍了如何手动启动angularjs程序，这里有手动启动angularjs程序的详解，现在就让我们一起来看看angularjs程序是如何手动启动的吧

Angular 官方文档写到，为了启动 Angular 程序，必须在 main.ts 文件里写上如下代码：

platformBrowserDynamic().bootstrapModule(AppModule);

登录后复制

这行代码 platformBrowserDynamic() 是为了构造一个 platform，Angular 官方文档对 platform 的定义是（译者注：为清晰理解，platform 定义不翻译）：

the entry point for Angular on a web page. Each page has exactly one platform, and services (such as reflection) which are common to every Angular application running on the page are bound in its scope.

同时，Angular 也有 运行的程序实例（running application instance）的概念，你可以使用 ApplicationRef 标记（token）作为参数注入从而获取其实例。上文的 platform 定义也隐含了一个 platform 可以拥有多个 application 对象，而每一个 application 对象是通过 bootstrapModule 构造出来的，构造方法就像上文 main.ts 文件中使用的那样。所以，上文的 main.ts 文件中代码，首先构造了一个 platform 对象和一个 application 对象。

当 application 对象被正在构造时，Angular 会去检查模块 AppModule 的 bootstrap 属性，该模块是用来启动程序的：

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

登录后复制

bootstrap 属性通常包含用来启动程序的组件（译者注：即根组件），Angular 会在 DOM 中查询并匹配到该启动组件的选择器，然后实例化该启动组件。（想看更多就到PHP中文网AngularJS开发手册中学习）

Angular 启动过程隐含了你想要哪一个组件去启动程序，但是如果启动程序的组件是在运行时才被定义的该怎么办呢？当你获得该组件时，又该如何启动程序呢？事实上这是个非常简单的过程。

NgDoBootstrap

假设我们有 A 和 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 {}

登录后复制

然后在 AppModule 中注册这两个组件：

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

登录后复制

注意，这里因为我们得自定义启动程序，从而没有在 bootstrap 属性而是 entryComponents 属性中注册这两个组件，并且通过在 entryComponents 注册组件，Angular 编译器（译者注：Angular 提供了 @angular/compiler 包用来编译我们写的 angular 代码，同时还提供了 @angular/compiler-cli CLI 工具）会为这两个组件创建工厂类（译者注：Angular Compiler 在编译每一个组件时，会首先把该组件类转换为对应的组件工厂类，即 a.component.ts 被编译为 a.component.ngfactory.ts）。因为 Angular 会自动把在 bootstrap 属性中注册的组件自动加入入口组件列表，所以通常不需要把根组件注册到 entryComponents 属性中。（译者注：即在 bootstrap 属性中注册的组件不需要在 entryComponents 中重复注册）。

由于我们不知道 A 还是 B 组件会被使用，所以没法在 index.html 中指定选择器，所以 index.html 看起来只能这么写（译者注：我们不知道服务端返回的是 A 还是 B 组件信息）：

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

登录后复制

如果此时运行程序会有如下错误：

The module AppModule was bootstrapped, but it does not declare “@NgModule.bootstrap” components nor a “ngDoBootstrap” method. Please define one of these

错误信息告诉我们， Angular 在向抱怨我们没有指定具体使用哪一个组件来启动程序，但是我们的确不能提前知道（译者注：我们不知道服务端何时返回什么）。等会儿我们得手动在 AppModule 类中添加 ngDoBootstrap 方法来启动程序：

export class AppModule {
  ngDoBootstrap(app) {  }
}

登录后复制

Angular 会把 ApplicationRef 作为参数传给 ngDoBootstrap（译者注：参考 Angular 源码中这一行），等会准备启动程序时，使用 ApplicationRef 的 bootstrap 方法初始化根组件。

让我们写一个自定义方法 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使用手册中学习），有问题的可以在下方留言提问。

以上是如何手动启动 Angular 程序？手动启动angularjs程序的详细解释的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7654

CakePHP 教程

1393

steam的账户名称是什么格式

win11激活密钥永久

NYT迷你填字游戏答案

110

显示更多

Related knowledge

Angular学习之聊聊独立组件（Standalone Component） Dec 19, 2022 pm 07:24 PM

本篇文章带大家继续angular的学习，简单了解一下Angular中的独立组件（Standalone Component），希望对大家有所帮助！

angular学习之详解状态管理器NgRx May 25, 2022 am 11:01 AM

本篇文章带大家深入了解一下angular的状态管理器NgRx，介绍一下NgRx的使用方法，希望对大家有所帮助！

5个常见的JavaScript内存错误 Aug 25, 2022 am 10:27 AM

JavaScript 不提供任何内存管理操作。相反，内存由 JavaScript VM 通过内存回收过程管理，该过程称为垃圾收集。

Vue3+TypeScript+Vite怎么使用require动态引入图片等静态资源 May 16, 2023 pm 08:40 PM

问题：Vue3+TypeScript+Vite的项目中如何使用require动态引入类似于图片等静态资源！描述：今天在开发项目时（项目框架为Vue3+TypeScript+Vite）需要动态引入静态资源，也就是img标签的src属性值为动态获取，按照以往的做法直接是require引入即可，如下代码：写上后代码波浪线报错，报错提示：找不到名称“require”。是否需要为节点安装类型定义?请尝试使用npmi--save-dev@types/node。ts(2580)在进行了npmi--save-d

浅析Angular中的独立组件，看看怎么使用 Jun 23, 2022 pm 03:49 PM

本篇文章带大家了解一下Angular中的独立组件，看看怎么在Angular中创建一个独立组件，怎么在独立组件中导入已有的模块，希望对大家有所帮助！

项目过大怎么办？如何合理拆分Angular项目？ Jul 26, 2022 pm 07:18 PM

Angular项目过大，怎么合理拆分它？下面本篇文章给大家介绍一下合理拆分Angular项目的方法，希望对大家有所帮助！

如何使用MySQL在TypeScript中实现数据类型转换功能 Jul 29, 2023 pm 02:17 PM

如何使用MySQL在TypeScript中实现数据类型转换功能引言：在开发Web应用程序时，数据类型转换是一个非常常见的需求。在处理数据库中存储的数据时，特别是使用MySQL作为后端数据库时，我们经常需要将查询结果中的数据按照我们所需的类型进行转换。本文将介绍如何在TypeScript中利用MySQL实现数据类型转换的功能，并提供代码示例。一、准备工作：在开