npm 包 extended-angular-firestore 使用教程

在前端开发中，使用 Angular 开发 Web 应用已经成为了标配。而使用 Firebase 这样的后端解决方案也越来越普遍。extended-angular-firestore npm 包提供了 Angular 和 Firebase 的完美结合，使得在 Angular 中使用 Firestore 数据库变得更加便捷和高效。

安装

首先，我们需要安装该包。你可以使用 npm 或者 yarn 安装：

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

除此之外，我们也需要在项目中引入 AngularFire2 以及 Firebase：

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

在引入之前最好查看下 AngularFire2 的文档并在 Firebase 控制台创建一个 Firebase 项目。

使用

基本结构

在使用 extended-angular-firestore 之前，我们需要定义一个 Firestore 集合的模型。我们可以在我们的模型中定义该集合的所有属性和操作。

例如，下面是一个 User 模型的示例：

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

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

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

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

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

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

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

在该模型中，我们定义了 firstName 和 lastName 两个属性。我们同时也在类中定义了我们的集合名，并且为该模型定义了在 Firestore 中的序列化和反序列化方法。

创建服务

接下来，我们需要创建一个服务用于操作该集合。我们可以使用 ExtendedAngularFirestoreService 来创建一个服务。我们可以在服务的构造方法中注入 AngularFireDatabase，FirestoreService 以及所需类型的集合或者随意可序列化的对象：

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

再加上 @Injectable() 装饰器，就可以让我们的服务被 Angular 所识别并在应用中使用。

现在，我们可以在我们的组件中注入该服务，并使用该服务来操作 Firestore 中的 Collection。

查询文档

下面是一个查询一个 User 文档的例子：

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

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

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

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

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

这里，我们通过 userService.get() 方法来查询一个文档。我们传递一个文档 ID 并订阅该方法，以获取文档的数据。

查询文档集合

我们也可以使用 userService.list() 方法来获取一个文档列表：

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

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

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

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

在该示例中，我们使用 userService.list() 获取了集合中的所有文档。在我们的模板中，我们通过 *ngFor 来展示所有的文档列表。

更新文档

我们可以使用 userService.update() 来更新一个文档

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

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

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

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

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

在该示例中，我们通过 userService.get() 获取了一个文档并订阅以获取其最新值。在我们的表单中，我们能够编辑它的属性。当我们提交表单时，需要调用 submitForm() 来更新文档。

创建文档

我们也能够使用 userService.create() 创建一个新文档：

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

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

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

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

在该示例中，我们将用户输入的值存储在 this.user 对象中，以保证其能够被序列化和传输到 Firestore。当我们提交表单时，我们使用 userService.create() 来创建一个新文档，并重新初始化输入表单。

结论

extended-angular-firestore 的目的就是可以帮助开发者便捷地操作 AngularFire2 和 Firestore。在 Angular 中，我们可以通过创建模型来定义我们的集合，并使用该模型来初始化服务，通过使用我们定义的服务来操作 Firestore。

以上是 "npm 包 extended-angular-firestore 使用教程"，希望对您在使用 extended-angular-firestore 上有所帮助。

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

阅读全文

猜你喜欢

  • npm 包 p2p-db-osm 使用教程

    前言 随着互联网技术的发展，前端工程师在开发过程中不再仅仅关注页面的呈现，越来越多的功能需要通过前端完成，比如在线编辑、实时互动等。而 p2p 技术可以让前端页面之间进行实时通信，极大提升用户体验。

    3 年前
  • npm 包 wmcc-desktop-dev 使用教程

    前言 wmcc-desktop-dev 是一款 npm 包，它是用于开发 wmcc-desktop 的帮助工具，它能够帮助你更加轻松地进行 wmcc-desktop 的调试、构建和验证。

    3 年前
  • npm 包 start-parallel 使用教程

    在前端开发中，我们常常需要启动多个任务来同时处理不同的工作。一些常见的任务包括编译前端代码、启动服务、执行测试和协同工作等等。但是我们往往需要在一个命令窗口中逐个执行这些任务。

    3 年前
  • npm包 webrtcshitblt 使用教程

    前言 现在，越来越多的工程师开始受到 WebRTC 技术的吸引，这是一项可以实现浏览器对浏览器直接通信的技术，并越来越多地应用在实时音视频通信中。webrtcshitblt 是一种基于 WebRTC ...

    3 年前
  • npm 包 qiniu-up 使用教程

    🚀 qiniu-up 是一个基于七牛云开发的 Node.js 模块，它提供了一组简单易用的 API，方便我们在 Node.js 和浏览器中快速地上传文件到七牛云空间中。

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

    介绍 omz-react-linkify 是一个可以将文本中的 URL 和邮件地址转换为链接的 React 组件。这个组件使用了 Linkify 包，它是一个很受欢迎的自动链接库。

    3 年前
  • npm 包 @b-flower/bdn-pocket 使用教程

    前言 随着前端技术的不断发展，我们越来越多地需要使用各种 npm 包来辅助我们的工作。而 @b-flower/bdn-pocket 就是一个非常有用的 npm 包，它可以帮助我们在前端中更好地处理数据...

    3 年前
  • npm 包 particles-div-detection 使用教程

    前言 particles-div-detection 是一个基于 JavaScript 开发的前端库，主要用于检测页面上的粒子是否与某个 div 元素相交。该库使用简单，适用于各类前端项目。

    3 年前
  • npm 包 Zohordeu 的使用教程

    Zohordeu 是一个非常强大的前端库，它为开发人员提供了一些非常强大的特性，如响应式布局、动画、路由、状态管理等。它是一个 npm 包，可以非常方便地集成到你的项目中。

    3 年前
  • npm 包 oc-term 使用教程

    在前端开发中，经常需要在命令行中使用各种工具来完成各种任务，比如编译代码、打包文件、启动服务等等。因此，熟练使用命令行工具也是前端工程师必备的技能之一。而 oc-term 就是一个非常好用的命令行工具...

    3 年前
  • npm包@itavia/react-autocomplete使用教程

    前言 在前端领域中，自动填充框是常见的一种功能。如果你正在寻找一个适合你的自动填充组件，那么 @itavia/react-autocomplete 可以是你的不二之选。

    3 年前
  • npm 包 modori 使用教程

    在前端开发中，我们经常需要使用各种各样的第三方库和工具来进行开发，其中 npm 是最为常用的一个依赖管理工具，而 modori 则是一款特别的 npm 包，它能够帮助我们更好地管理包的依赖和版本，提高...

    3 年前
  • npm 包 swatk6-emitter 使用教程

    npm 包 swatk6-emitter 使用教程 介绍 swatk6-emitter 是一款轻量级的事件分发库，适用于前端和 Node.js 环境中。

    3 年前
  • npm 包 astronode-utils 使用教程

    npm 包 astronode-utils 使用教程 在前端开发中，我们经常会使用各种 npm 包来帮助我们解决问题。其中一个非常有用的 npm 包是 astronode-utils。

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

    在前端开发中，我们常常需要使用其他开发者的库和工具来优化和加速我们的开发工作。其中，npm 是一个常用的包管理器，提供了许多易于使用的包，用来简化我们的开发过程。css-bxrf 就是其中一个非常有用...

    3 年前
  • npm 包 sql-conn 使用教程

    前言 在前端开发的过程中，我们经常需要和数据库进行交互。然而，直接在前端使用数据库并不安全，也不方便维护。因此，我们一般会使用一些中间件或者后端框架（如 Node.js）来和数据库交互。

    3 年前
  • npm 包 generator-labs-koa-api 使用教程

    介绍 generator-labs-koa-api 是一个基于 Yeoman 的 Node.js 应用生成器，用于快速创建基于 Koa.js 的 RESTful API 项目，同时也提供了一些实用工具...

    3 年前
  • npm 包 union-vue-typescript-quick-starter 使用教程

    在前端开发中，使用 Vue.js 和 TypeScript 的组合已经成为了一种趋势。为了更方便地开发 Vue.js 和 TypeScript 的项目，union-vue-typescript-qui...

    3 年前
  • npm 包 webpack-child-config-plugin 使用教程

    前端工程化是前端领域中的一个非常重要的技术。而在前端工程化方面，webpack 可谓是大名鼎鼎。在 webpack 中，我们经常会用到一些插件来完成一些特定的功能，其中一个非常实用的插件就是 webp...

    3 年前
  • npm 包 uniapp-loader 使用教程

    随着前端技术的不断发展和更新，开发者们需要掌握更多的新技能和工具。uniapp-loader 就是一款非常有用的工具，它可以帮助我们更方便地开发 uni-app 项目。

    3 年前

相关推荐

    暂无文章