在前端开发领域，Ionic 4、Angular、Firebase 和 Firestore 是极为流行且备受欢迎的技术。这些技术的组合是非常有用的，可以帮助开发者轻松构建出优秀的桌面端和移动端的应用。
在本文中，我们将为大家介绍如何通过使用这些技术的组合来构建出全栈式的应用，其支持前端和后端的集成开发，同时我们还将提供相关的示例代码。
Ionic 4
Ionic 4 是一个基于 Web 技术的开源框架，它能够帮助开发者构建出高质量的桌面端和移动端应用。Ionic 4 提供了许多有用的组建和工具，这些组建和工具可以帮助开发者快速构建出优秀的用户界面。
身为有经验的前端开发者，你一定已经熟悉 Angular，因为 Ionic 4 是基于 Angular 框架实现的。在 Ionic 4 中，使用 TypeScript 语言编写代码，这让编写高效且优化的 Angular 应用变得十分容易。
在接下来的部分，我将为大家提供一些代码，演示如何在 Ionic 4 中进行视图组合。
-- -------------------- ---- -------
------------
------------ ----------------
---------------------------
--------------
-------------
-------------
----------
--------- ----------- -------- -- -----------
-------------- -------------
---- ------------------------- --
----------------
-----------
------ -------------- -------
----- -------------------- ------
------------
-----------
-----------
--------------Angular
Angular 是一个被 Google 所开发的 TypeScript 框架，它可以帮助开发者构建出大型的 Web 应用。Angular 是一个基于组件化的架构，它将各个应用组建封装成了独立的功能模块，通过这些模块，可以帮助开发者实现复用性更强的代码。
在理解了 Angular 具有的这些功能后，我们将现在的这个例子转移到 Angular 中，然后更新 UI。
<app-news-list></app-news-list>
-- -------------------- ---- -------
------------
--------- ----------------
------------ ----------------------------
--
------ ----- ----------------- ---------- ------ -
---------- -----------
------------------- ---------- ----------------- --
---------- -
--------------
------------------------
---------------
---------------------- ----------- -- -
-------------- - ----------
---
-
-在这个例子中，将新闻组建封装到 NewsListComponent 中。在 ngOnInit 场景钩子中，我们通过 this.firestore.collection('newsItems').valueChanges() 获取 newsItems 的 Firebase Firestore 数据集合。由于使用了 valueChanges()，我们随时会订阅数据集合的更新，并非实时。在实际中需要使用snapshotChanges才能实现类似MongoDB的实时推送。
示例 NewsItem 数据模型及 Firestore 规则如下：
-- -------------------- ---- -------
------ --------- -------- -
------ -------
------------ -------
--------- -------
--------- -------------------------------------
-
------- --------------- -
----- ------------------------------- -
----- ---------------------- -
----- ----- -- -----
----- ------- -- ---------------- -- ------
----- ------- ------- -- ---------------- -- ------
-
-
-Firebase
Firebase 是 Google 官方的后端服务平台。Firebase 提供了一系列的功能，例如实时数据库、认证等
区分 Firestore 数据库和实时数据库，其中 Firestore 表示有原生查询能力的 NoSQL 数据库，适合作为后端数据库。实时数据库适合读写实时数据，例如游戏。
在实际的项目构建过程中，可以根据需要选择使用 Firestore 还是实时数据库。在本文中，我们将使用 Firestore 。
Firestore 配置
- 创建 Firebase 项目。
- 在控制台中添加 Firestore 数据库，选择数据存储的区域（例如 us-central1）。
- 构建 Firestore 服务凭证，将该信息加入 Angular 代码中。
AngularFire
AngularFire 是 Angular 官方提供的 Firebase 数据库操作工具库。它提供了不少强大的 API 方法，可以快速和轻松地在你的应用中体验 Firebase 开发工具。
在此处，我们以 AngularFireModule 和 AngularFirestoreModule 为例，演示如何快速配置 Firebase 并开始使用 Firestore。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------------- - ---- ----------------
------ - --------------------- - ---- ---------------------
------ - ------------------------ - ---- ------------------------
------ -
-----------------------
-------- -- ------------------
- ---- --------------------------
------ - ----------- - ---- ------------------------------
-----------
-------- -
------------------------------------------------------
----------------------
-------------------------
----------------------
--
---------- -
-
-------- -------------------
--------- -----------------------------
-
-
--
------ ----- -------------- --集成开发
现在开始将 Firebase 和 Firestore 配置到 Ionic 4 应用程序中。要开始使用 Firestore，必须在应用中加载 AngularFire 库。下一步，我们将在 Angular 中添加 AngularFire 库和 Firebase 配置。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------------- - ---- ----------------
------ - --------------------- - ---- ---------------------
------ - ------------------------ - ---- ------------------------
------ -
-----------------------
-------- -- ------------------
- ---- --------------------------
------ - ----------- - ---- ------------------------------
-----------
-------- -
------------------------------------------------------
----------------------
-------------------------
----------------------
--
---------- -
-
-------- -------------------
--------- -----------------------------
-
-
--
------ ----- -------------- --在 environment.ts 配置中添加 Firebase 相关配置信息。
-- -------------------- ---- -------
------ ----- ----------- - -
----------- ------
--------- -
------- --------
----------- --------
------------ --------
---------- --------
-------------- --------
------------------ --------
------ --------
-------------- -------
--
------------------ -
---------------------- -----
---------------------------------- ----
-
--所有的 Firebase 和 Firestore 配置已经完毕。下一步，我们要更新应用程序中的 NewsListComponent 模块，以连接到 Firebase 数据库并获取 newsItems 数据。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- - ---- --------------------------
------ - -------- - ---- ----------------------------
------------
--------- ----------------
------------ ----------------------------
--
------ ----- ----------------- ---------- ------ -
---------- -----------
------------------- ---------- ----------------- --
---------- -
--------------
------------------------
---------------
---------------------- ----------- -- -
-------------- - ----------
---
-
-现在，在 news-list.module.ts 模块中引用 AngularFirestore。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- -----------------
------ - ----------------- - ---- ----------------
------ - ---------------------- - ---- --------------------------
------ - ----------- - ---- ---------------------------------
------ - ----------------- - ---- ------------------------
-----------
------------- --------------------
-------- -
-------------
------------
------------------------------------------------------
----------------------
--
-------- --------------------
---------- --
--
------ ----- -------------- --总结
在本文中，我们介绍了在 Ionic 4、Angular 和 Firebase 中使用 Firestore 的方法，这使得构建全栈应用程序变得更加容易。我们在这个应用程序中获取 newsItems 数据对象，并使用 AngularFire 和 AngularFirestore 进行封装。通过这种方式，我们就可以快速地获取专业的技术栈并基于现代化的技术开发全栈应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f540c5f6b2d6eab3df254e