Angular platform是什么?

发表于 更新于 分类于 阅读次数： 本文字数： 2.6k 阅读时长 ≈ 2 分钟

1. Angular platform 是什么?

原文: Angular Platforms in depth. Part 1. What are Angular Platforms?

2. 前言

在这一系列文章中，我将向你们揭示 Angular 应用程序如何跨不同环境执行。此外，我们还将学习如何构建自定义 Angular Platforms 使用 ASCII 图形呈现系统终端内的应用程序。

Angular 框架被设计成平台独立的。即允许在不同的环境中执行 Angular 应用程序  —  浏览器、服务器、web-worker，甚至移动设备。

3. 目录

  • Angular 是一个跨平台框架
  • 什么是 Angular 平台
  • Angular 如何运行跨平台执行

4. Angular 是一个跨平台框架

正如我之前所说，Angular 的设计充分考虑到了灵活性。这就是 Angular 是一个跨平台框架的原因，它不受浏览器的限制。Angular 唯一需要是作为 JavaScript 引擎执行。让我们看看最流行的 Angular 环境。

4.1. 浏览器(Browser)

当我们使用 Angular 命令行工具 ng new MyNewApplication创建新的 Angular 应用程序时，它会将浏览器环境设置为应用程序的默认环境。

4.2. 服务器(Server)

Angular 应用程序可以在服务器端编译和执行。在这种情况下，我们可以将 Angular 应用程序编译成静态 HTML 文件，然后将这些文件发送给客户端。
这种方法允许我们加快应用程序的加载速度，同时确保应用程序将被所有搜索引擎正确索引。

4.3. Web worker

此外，我们可以将 Angular 应用程序的一部分移动到单独的线程执行例如在 web worker 线程中执行。在这种情况下，我们只将应用程序的一小部分留在主线程，这一部分将允许 web worker 部分与 dom API 进行通信。
这种方法允许您生成一个更平滑, 流畅的 UI，因为应用程序的大多数计算将与 UI 分开进行。

注意: Web worker 环境从一开始就是实验性的，从 8 开始就被弃用了。

4.4. NativeScript

此外，还有很多第三方库，允许我们在不同的环境中执行 Angular 应用程序, 例如 NativeScript。NativeScript 使 Angular 能够在移动设备上执行，利用 Native 应用的所有功能。

但是，如何在不同的环境中执行 Angular 应用程序呢？

5. 什么是 Angular 平台

但是，如何在不同的环境中执行 Angular 应用程序呢？

答案就是是平台(angular platforms)

为了弄清楚什么是角度平台，我们需要查看每个角度应用程序的入口点  — main.ts 文件:

1
2
3
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

platformBrowserDynamic().bootstrapModule(AppModule);

在这里，我们可以注意到两个重要部分：

  • platformBrowserDynamic()函数返回了一个对象。

  • 该对象被用于引导我们的应用程序。

如果我们稍微重写一下，我们会发现一个有趣的细节：

1
2
3
4
5
6
7
8
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { PlatformRef } from "@angular/core";

// Create Browser Platform
const platformRef: PlatformRef = platformBrowserDynamic();

// Bootstrap Application
platformRef.bootstrapModule(AppModule);

platformBrowserDynamic 是一个工厂方法  —  用于创建新平台实例的函数。调用 platformBrowserDynamic 函数返回的结果是 PlatformRef。PlatformRef 是一个简单的 angular 服务，它知道如何引导我们的应用程序。为了更好地理解 PlatformRef 实例是如何创建的，让我们深入了解 platformBrowserDynamic 实现：

1
2
3
4
5
6
7
8
9
10
export const platformBrowserDynamic = createPlatformFactory(
  // Parent platform factory
  platformCoreDynamic,

  // New factory name
  "browserDynamic",

  // Additional services
  INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS
);

在这里，我们可以看到 platformBrowserDynamic 函数只是 createPlatformFactory 函数的结果，它接受以下参数：

  • 父 platform factory 函数  — platformCoreDynamic
  • 新平台的名称  — ‘browserDynamic’
  • 其他 providers — INTERNAL_BROWSER_DYNAMIC_PLAFORM_PROVIDERS，

platformCoreDynamic 是一个父 platform factory 函数。我们可以将 platformCoreDynamic 和 platformBrowserDynamic 之间的关系视为继承。所以，createPlatformFactory 函数只是帮助我们从一个平台工厂继承另一个平台工厂。就这么简单。
更有趣的部分发生在继承层次结构的更深处。事实上，platformCoreDynamic 继承了 platformCore，而 platformCore 没有父级。

下面是 platformBrowserDynamic 的完整层次结构：

6. Angular 系列文章

最新更新以及更多 Angular 相关文章请访问 Angular 合集 | 鹏叔的技术博客

7. 参考文章

Angular Platforms in depth. Part 1. What are Angular Platforms?