npm 包 ngx-universal-state-transfer 使用教程

在构建单页应用（SPA）时，前后端渲染（SSR）是一个流程较为复杂的过程。Angular 框架的开发者推荐使用 Universal 实现 SSR，这种方法需要在前后端之间传递渲染数据。本文介绍如何使用 npm 包 ngx-universal-state-transfer 实现数据传递。

ngx-universal-state-transfer 是什么？

ngx-universal-state-transfer 是一个 Angular npm 包，它提供了浏览器端和服务端数据传输的一致性。ngx-universal-state-transfer 在服务端生成一个全局变量，这个变量将在客户端使用，从而跨 Angular 应用程序的传输状态。使用此模块，可以使数据在客户端和服务器之间自动转移。

下面是一个简单的使用场景：

------ - -------------------- - ---- --------------------------------

----- ----------- -
  ------- ----------- ------ - -----
  ------------------- -------------- --------------------- --

  ----- -------------- --------------- -
    -- ---------------- --- ----- -
      ----- ---------- - -----------------------------------------
      -- ------------ -
        --------------- - -----------
      - ---- -
        --------------- - ----- -----------------
        -------------------------------- -----------------
      -
    -
    ------ ----------------
  -

  ------- ----- ------------ --------------- -
    ----- -------- - ----- -------------------
    ----- ---- - ----- ----------------
    ------ -----
  -
-

在上面的代码中，StateTransferService 是用于在客户端和服务器之间传递数据的主要服务。例如，要使用此示例中的服务进行异步数据检索，请调用 getHttpData（）方法。此方法首先检查服务器是否已设置有缓存的数据。如果有，则返回缓存数据；如果没有，则调用 fetchData() 方法从服务器获取数据。获取数据后，它将存储在缓存中，并调用 stateTransfer.set() 方法存储数据，这会在客户端调用 stateTransfer.get() 方法时返回该数据。

ngx-universal-state-transfer 使用教程

接下来，我们将使用 ngx-universal-state-transfer 实现一个简单的应用。

安装 ngx-universal-state-transfer

首先，在你的 Angular 项目根目录下运行以下命令，安装 ngx-universal-state-transfer：

--- ------- -----------------------------

服务端配置

app.server.module.ts

在项目中先创建一个服务端渲染模块，查询官方文档了解更多 Angular SSR 相关信息。

然后，在 app.server.module.ts 文件中，添加 TransferState 和 ServerTransferStateModule 来进行服务端共享状态：

------ ---------- ---- ----------------
------ -------------- -------------------------- ---- ---------------------------
------ ----------- ---- ---------------
------ -------------- ---- ------------------
------ --------------- ---- ----------------------------

-----------
  -------- -
    ----------
    -------------
    --------------------------
  --
  ---------- ---------------
--
------ ----- --------------- -
  ------------------- -------------- -------------- - -

  ------------- - -- -- -
    ----- ----- - ----------------------------
    -- ------------------------ ---------------------------------
    ----------------- - ------
  -
-

客户端配置

app.browser.module.ts

在 app.browser.module.ts 文件中，添加 BrowserTransferStateModule 来进行客户端共享状态：

------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - -------------------------- - ---- ----------------------------

------ - --------- - ---- ---------------
------ - ------------ - ---- ------------------

-----------
  -------- -
    ----------
    ------------------------------------ ------ -------- ---
    ---------------------------
  --
  ---------- --------------
--
------ ----- ---------------- - -

这里的 appid 是在客户端和服务器之间传递状态所需要的应用程序标识符。

app.component.ts

在最后一步中，我们将添加一些示例代码来演示如何在 Angular 组件中使用 ngx-universal-state-transfer，并在客户端和服务器之间共享数据：

------ ----------- ------- ---- ----------------
------ --------------- ------------- ---- ----------------------------
------ ---------------------- ---- --------------------------------

----- ------------- - ---------------------------------

------------
  --------- -----------
  --------- -
    ---- ------------ ------ ----------- ------------------- ------------ ---
      -------------------------------- -------
      ---- ------------------
        ---- -----------------------
          ----------- ---------- ------
        ------
        ---- -----------------------
          ----------- ---------- ------
        ------
      ------
    ------
  --
  ------- --
    ---------- -
      -------- -----
      ---------------- -------------
    -

    ----------------
    --------------- -
      ------ ------
    -
  ---
--
------ ----- ------------ ---------- ------ -
  ------ ------ ------ - --------
  ------ -------- ------ - --------
  ------ ----------- ------ - ---
  ------ ----------- ------ - ---

  ------------
    ------- --------- ---------------------
    ------- -------------- --------------
  - - -

  ---------- -
    --------------- - ---------------------------------------- ----
    -- ---------------- --- --- -
      ------------------
        --------- -- -----------
        ------------ -- -
          --------------- - -----
          ---------------------------------------- -----------------
        ---
    -

    --------------- - --------------------------------------------- ----
    -- ---------------- --- --- -
      ------------------
        --------- -- -----------
        ------------ -- -
          --------------- - -----
          --------------------------------------------- -----------------
        ---
    -
  -
-

在此示例中，我们向客户端渲染器和服务器渲染器传递标记为 SOME_DATA_KEY 的状态。 serverData 和 clientData 属性将包含从服务器和客户端传递的数据。如果没有从服务器获取到数据，则通过 fetch() 方法异步获取数据并将其存储在 ngx-universal-state-transfer 中。

结论

ngx-universal-state-transfer 简化了在客户端和服务器之间进行状态传输的过程。使用该模块，数据将在客户端和服务器之间自动传输，并且可以在 Angular 应用程序中使用。通过上述示例，我们可以观察到使用 ngx-universal-state-transfer 的 API 是相对简单的。

无论你正在使用 Angular 进行单页应用或渐进增强应用开发，通过使用 ngx-universal-state-transfer，你可以快速的实现客户端和服务器之间的数据共享。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ebd81e8991b448dc732

阅读全文

猜你喜欢

  • npm 包 flows-gateway 使用教程

    1. 简介 flows-gateway 是一个基于 Node.js 的 npm 包，它是一个轻量级的消息队列系统，用于在前端与后端系统之间传递消息。它具有良好的可伸缩能力，可以承载大量消息，使前端与后...

    3 年前
  • npm 包 percentage-difference 使用教程

    前言 在开发前端项目时，经常会遇到需要比较两个值之间的变化程度的情况，例如计算两个时间的时间差、计算两个数字之间的百分比变化等。而 npm 包 percentage-difference 可以帮助我们...

    3 年前
  • npm 包 angular-openfb 使用教程

    什么是 angular-openfb angular-openfb 是一个 AngularJS 模块，提供了使用 Facebook API 的便捷方式。它包含了所有与 Facebook 服务的通信、授...

    3 年前
  • npm 包 ember-mdc 使用教程

    如果你是一名前端开发者，想要快速开发出美观又功能强大的 web 应用，那么你一定不能错过 ember-mdc 这个 npm 包。本文将带你详细了解 ember-mdc 的用法与实现原理，让你轻松掌握使...

    3 年前
  • npm包ga-webdriveragent使用教程

    简介 ga-webdriveragent 是一个使用Node.js写的Web自动化测试客户端，基于Selenium WebDriver和Appium WebDriver协议，使用Facebook的We...

    3 年前
  • npm 包 just-indent 使用教程

    介绍 在前端开发中，我们常常需要处理代码的缩进问题。有时候代码缩进不太规范，一些代码段缩进不一致，就会影响代码的可读性。npm 包 just-indent 就是为了解决这个问题而生的。

    3 年前
  • npm 包 unique_id_generator 使用教程

    在前端开发中，我们经常需要使用唯一的 ID 来标识页面元素，这时候就需要一个好用的 ID 生成器。npm 上有很多 ID 生成器，今天我们来介绍一下 unique_id_generator 这个包的使...

    3 年前
  • npm 包 css-customproperties-parser 使用教程

    简介 在编写前端样式时，我们经常会使用 CSS 自定义属性，也就是 CSS 变量。但是，由于浏览器对 CSS 变量支持的不够完善，导致我们在某些情况下需要将这些自定义属性转化为普通的 CSS 声明。

    3 年前
  • npm 包 findstreak 使用教程

    简介 findstreak 是一个用于计算 Github 用户代码连续贡献天数的 npm 包。它可以通过 Github API 获取用户的代码提交记录，计算出连续贡献天数，并提供了相应的 API。

    3 年前
  • npm包Express-mega-router的使用教程

    简介 Express-mega-router是一个npm包，是一个专门用于构建RESTful API的express路由工具。使用Express-mega-router，前端开发人员可以轻松构建出强大...

    3 年前
  • npm 包 generator-metal-webpack 使用教程

    在 Web 开发领域，前端技术日新月异，我们需要不断地学习新技术，采用新工具来提高自己的开发效率。generator-metal-webpack 就是其中一个非常优秀的 Webpack 脚手架工具，它...

    3 年前
  • npm 包 laravel-elixir-foundation-emails 使用教程

    前端开发中，经常会涉及到邮件设计的问题。如果希望邮件的设计效果更加优秀，并且能够兼容各种邮箱客户端，那么建议使用 Foundation Email。 laravel-elixir-foundation...

    3 年前
  • npm 包 search-issues 使用教程

    简介 search-issues 是一个通过命令行搜索 GitHub 问题的 npm 包。可以帮助前端开发人员快速找到相关问题并解决问题，提高工作效率。 安装 在终端中执行以下命令可以全局安装 sea...

    3 年前
  • npm 包 signalr-service 使用教程

    前言 SignalR 是一个开源的 ASP.NET 应用程序框架，可以在 Web 应用程序中添加实时 web 功能。而 signalr-service 则是一个 npm 包，它可以让前端开发者更加方便...

    3 年前
  • npm 包 computes-dictation-watson 使用教程

    在前端开发中，有时候需要通过语音输入来获取用户输入的文本内容。那么这时候该如何实现呢？本文介绍一款 npm 包，即 computes-dictation-watson，它可以通过 Watson 语音识...

    3 年前
  • npm 包 starfishjs 使用教程

    前言 在前端开发中，我们需要使用很多第三方库来加快开发进程。npm 是一个非常方便的工具，可以帮我们管理这些库。在本文中，我们将介绍一个名为 starfishjs 的 npm 包的使用方法。

    3 年前
  • npm 包 mojs-util-parse-stagger-property 使用教程

    简介 mojs-util-parse-stagger-property 是一款能够帮助前端开发者快速生成复杂动画的 npm 包。通过使用该包，开发者可以轻松生成呈现动画的属性值，例如延迟、过渡时间等。

    3 年前
  • npm 包 rule-builder-client 使用教程

    前言 在前端开发过程中，我们经常需要按照业务需求动态生成一些规则来做数据筛选、验证等操作，而 rule-builder-client 就可以帮助我们完成这个任务。本教程将详细介绍如何使用此 npm 包...

    3 年前
  • npm 包 react-keygen 使用教程

    随着应用程序变得越来越复杂，生成唯一的 ID 变得越来越常见。React 应用程序同样需要生成唯一的 ID 来确保组件间的唯一性。在这种情况下，我们通常会使用 UUID（通用唯一标识符）来创建唯一的标...

    3 年前
  • npm 包 is-directory-promise 使用教程

    在前端开发中，经常需要判断一个路径是否为一个文件夹。Node.js 原生提供了一个 fs 模块，其中有一个方法 fs.stat()，可以用来判断文件或文件夹的存在情况。

    3 年前

相关推荐

    暂无文章