npm 包 @wheelerlaw/angular-in-memory-web-api 使用教程

简介

@wheelerlaw/angular-in-memory-web-api 是一个模拟 REST API 的插件，可用于 Angular 应用程序中的开发和测试，并且不需要真正的后端服务器。在开发阶段，它可以模拟服务端 API，这样就可以专注于前端的开发。

安装

1.在命令行中运行以下命令：

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

2.然后，在你的 Angular 应用程序的 AppModule 中引入 InMemoryWebApiModule：

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

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

3.在 InMemoryDataService 中定义模拟数据：

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

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

4.在你的组件中使用 HttpClient 请求：

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

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

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

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

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

拓展

InMemoryDataService 还支持更多的模拟数据操作，如新建、更新、删除等操作。

在参考官方文档后，我们可以通过实现 InMemoryDbService 接口中的一些方法去实现这些功能，如下：

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

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

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

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

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

总结

我们学会了使用 @wheelerlaw/angular-in-memory-web-api 插件去模拟 REST API，可以加速前端开发中的调试工作，同时这个插件也让我们不再需要在开发前端的时候要先部署一个后端服务，极大的减小了开发难度。

除此之外，我们还学会了如何在 InMemoryDbService 中定义模拟数据并实现一些基础的模拟数据操作，从而使我们可以更灵活地应对前端开发中出现的各种需求。

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

阅读全文

猜你喜欢

  • npm 包 react-native-avaudiorecorder 使用教程

    介绍 react-native-avaudiorecorder 是一款适用于 React Native 的 npm 包，可以用于录制音频。在前端开发中，我们有时会需要使用到录制音频功能，在音频编辑、音...

    2 年前
  • npm 包 git-credits 使用教程

    什么是 git-credits？ git-credits 是一个可以生成代码提交贡献者列表的工具，可以使用 git log 命令来获取到项目的所有提交记录，并解析其中的提交作者信息，将其按照邮件地址归...

    2 年前
  • npm 包 sguid 使用教程

    什么是 sguid？ sguid 是一个 npm 包，其功能是生成简单 GUID。SGUID （简单全局唯一标识符）是一个字符串，由 8 组 4 个字母数字字符组成，每个组都由短划线 - 分隔。

    2 年前
  • npm 包 @beisen/p-cnpm-test 使用教程

    简介 在前端开发中，npm 是无法绕过的工具之一，它能够帮助我们管理依赖包并提供了非常便捷的包管理工具。@beisen/p-cnpm-test 是一款 npm 包，它提供了一系列的前端类接口，能够帮助...

    2 年前
  • npm包ddry-selenium-firefox使用教程

    在前端开发过程中，经常会用到自动化测试等一些操作。基于这个需求，npm 上提供了大量的自动化测试相关包，其中 ddry-selenium-firefox 是一个使用 Selenium 来控制 Fire...

    2 年前
  • npm 包 enigma-ts 使用教程

    近年来，JavaScript 在前端开发中的应用越来越广泛，而 npm 作为一款优秀的 JavaScript 包管理器，也因此备受欢迎。今天我们来介绍一款名为 enigma-ts 的 npm 包，它是...

    2 年前
  • npm 包 denormalize-with-state 使用教程

    在现代的前端应用中，前端状态管理的框架非常流行。但是，前端状态管理也带来了一些问题，其中之一是处理嵌套对象的规范化和反规范化。这已经成为了前端面临的一个普遍的问题。

    2 年前
  • npm 包 react-native-rw-get-gallery-image 使用教程

    介绍 react-native-rw-get-gallery-image 是一个能够快速获取手机相册图片的 npm 包，适用于 React Native 开发。它提供了简洁的 API，可帮助开发者在应...

    2 年前
  • npm 包 tmp.component.validator 使用教程

    前端开发中，校验用户输入数据是必不可少的。为了让校验这一步骤更加方便、高效，npm 包 tmp.component.validator 呈现了出来。该 npm 包提供了多种校验方式，可以满足大多数校验...

    2 年前
  • npm包koa-2-webpack-dev-middleware使用教程

    前言 在Web前端的开发过程中，开发者们通常使用各种工具来提高开发效率和程序性能。一个好的工具或框架可以让开发过程更为高效和便捷，也可以帮助我们更好地理解和掌握一些前端技术。

    2 年前
  • npm 包 express-bem-xjst 使用教程

    介绍 express-bem-xjst 是一个用于快速搭建基于 BEM 模式的 Web 应用程序的 npm 包。它基于 Express 框架和 bem-xjst 模板引擎，可以快速创建符合 BEM 规...

    2 年前
  • npm 包 karma-prettybrowser-reporter 使用教程

    1. 背景 在前端开发中，我们经常需要使用自动化测试工具来确保代码的质量和稳定性。而 Karma 是一款非常流行的前端自动化测试框架，可以帮助我们方便地运行测试用例。

    2 年前
  • npm 包 react-nes 使用教程

    简介 react-nes 是一个基于 React 的 NES 游戏主题 UI 库。它能够让你的 Web 应用程序更加有趣，让用户体验更接近于游戏。 安装和导入 可以使用 npm 包管理器进行安装： -...

    2 年前
  • npm 包 selvera-pg 使用教程

    前言 在前端开发中，数据库连接是非常重要的一环，我们需要使用一些工具库帮助我们连接数据库。而 npm 包 selevra-pg 是一个非常好用的库，它可以方便我们连接 PostgreSQL 数据库并进...

    2 年前
  • npm 包 angular-sticky-plugin-v2 使用教程

    本文介绍如何使用 npm 包 angular-sticky-plugin-v2，该包可以实现固定在页面上方的元素，在页面滚动时保持固定位置。本文旨在为前端开发者提供详细的教程，探讨该包的使用和实现原理...

    2 年前
  • npm 包 hany-consul-backup-restore 使用教程

    在前端开发中，常常需要处理一些数据备份和恢复的问题。为此，我们可以使用 npm 包 hany-consul-backup-restore，它是一款基于 Node.js 的 CLI 工具，可以帮助我们备...

    2 年前
  • NPM 包 load-webpack-plugins 使用教程

    在前端开发过程中，webpack 是必不可少的工具之一。而其中涉及到的插件则更是在各个领域中被广泛使用。但是在项目中使用大量插件容易造成代码臃肿，这时使用 load-webpack-plugins 这...

    2 年前
  • react-bootstrap-slider-talater（作者：Tal Ater）

    简介 react-bootstrap-slider-talater 是一个 react 的 npm 包，用于在 react 项目中快速添加 bootstrap 样式的滑块和范围滑块。

    2 年前
  • npm 包 react-native-get-gallery-image 使用教程

    在 React Native 开发过程中，我们经常需要访问用户手机中的图片库。而 react-native-get-gallery-image 是一款方便快捷地访问手机图片库的 npm 包。

    2 年前
  • npm 包 redux-submission 使用教程

    在前端开发中，为了更好地管理代码状态，Redux 成了一种常用的状态管理方式。redux-submission 是一个针对 Redux 的状态管理库，它可以帮助我们更好地处理表单提交时的异步请求和状态...

    2 年前

相关推荐

    暂无文章