简介
Angular2 是一个开源的前端框架，可以帮助开发者快速构建 Web 应用程序。Firebase 是 Google 提供的一个后端服务，它可以提供数据库、身份验证、云存储等功能，可以帮助开发者快速构建 Web 应用程序。
本文将介绍如何使用 Angular2 和 Firebase 开发在线投票应用程序。本文将详细介绍如何使用 Angular2 和 Firebase 构建一个基本的在线投票应用程序，并提供示例代码。
准备工作
在开始之前，需要安装以下软件：
- Node.js：用于安装 Angular2 和 Firebase。
- Angular CLI：用于创建 Angular2 应用程序。
- Firebase：用于创建 Firebase 项目并获取 Firebase 配置信息。
创建 Angular2 应用程序
首先，使用 Angular CLI 创建一个新的 Angular2 应用程序。打开终端并输入以下命令：
ng new voting-app
这将创建一个名为 "voting-app" 的新 Angular2 应用程序。然后进入应用程序目录：
cd voting-app
安装 Firebase SDK
接下来，安装 Firebase SDK。在终端中输入以下命令：
npm install firebase --save
这将安装 Firebase SDK 并将其添加到 package.json 文件中。
创建 Firebase 项目
在开始之前，需要创建一个 Firebase 项目。请按照以下步骤创建 Firebase 项目：
- 访问 Firebase 控制台。
- 点击 "创建项目" 按钮。
- 输入项目名称并选择所在的国家/地区。
- 点击 "继续" 按钮。
- 选择 Google Analytics 选项并点击 "创建项目" 按钮。
创建 Firebase 项目后，需要获取 Firebase 配置信息。在 Firebase 控制台中，点击 "设置" 图标，然后选择 "项目设置"。在 "常规" 选项卡中，向下滚动并找到 "Firebase SDK Snippet" 部分。选择 "CDN" 选项卡并复制以下代码：
-- -------------------- ---- -------
------- ------------------------------------------------------------------------
------- -----------------------------------------------------------------------------
--------
-- ---- --- ----- -------- -------------
--- -------------- - -
------- ----------
----------- -----------------------------
------------ ------------------------------------
---------- -------------
-------------- -------------------------
------------------ ------------
------ ---------
-------------- ------------------
--
-- ---------- --------
---------------------------------------
---------将上述代码复制到 index.html 文件中，并将 "API_KEY"、"PROJECT_ID"、"SENDER_ID"、"APP_ID"、"MEASUREMENT_ID" 替换为实际值。
创建投票组件
接下来，创建一个投票组件。在终端中输入以下命令：
ng generate component vote
这将创建一个名为 "vote" 的新组件。然后，在 app.component.html 文件中添加以下代码：
<app-vote></app-vote>
这将在应用程序中添加一个新的投票组件。
实现投票功能
现在，我们将实现投票功能。在投票组件中，我们将创建一个表单，用于收集用户投票。当用户提交投票时，我们将使用 Firebase 将投票信息保存在数据库中。
首先，在投票组件的 HTML 文件中，添加以下代码：
-- -------------------- ---- -------
----- ----------------------
--------- -- ---- -------- -----------
-----
------ ------------ ------------ ----------- ------------------------ ---------
------ ---------------------
------
-----
------ ------------ ------------ ------------ ------------------------ ---------
------ -----------------------
------
-----
------ ------------ ------------ ------------- ------------------------ ---------
------ -------------------------
------
------- ---------------------------
-------这将创建一个表单，用于收集用户投票。当用户提交表单时，将调用 onSubmit() 方法。
然后，在投票组件的 TypeScript 文件中，添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- -------------------------
------ - ---------- - ---- -------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- -
---- - - ------ -- --
------ ------------------
------------------- --- -------------------- -
---------- - --------------------------------
-
---------- -
--------------------------------------
--------- - - ------ -- --
-
-这将创建一个投票组件，用于收集用户投票并将其保存到 Firebase 数据库中。在构造函数中，我们使用 AngularFireDatabase 获取 Firebase 数据库的引用。然后，在 onSubmit() 方法中，我们将投票信息保存到 Firebase 数据库中。
最后，在 app.module.ts 文件中，添加以下代码：
-- -------------------- ---- -------
------ - ----------------- - ---- ----------------
------ - ------------------------- - ---- -------------------------
-----------
------------- -
-------------
-------------
--
-------- -
--------------
------------
------------------------------------------------
-------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -这将在应用程序中添加 AngularFireModule 和 AngularFireDatabaseModule，用于连接 Firebase 数据库和 Angular2 应用程序。
运行应用程序
现在，我们已经创建了一个基本的在线投票应用程序。使用以下命令启动应用程序：
ng serve
然后，在浏览器中访问 http://localhost:4200，即可访问应用程序。
总结
本文介绍了如何使用 Angular2 和 Firebase 构建一个基本的在线投票应用程序。本文详细介绍了如何使用 Angular2 和 Firebase 实现投票功能，并提供了示例代码。希望本文对您有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c0b40cadd4f0e0ffab267e