使用 Angular2 和 Firebase 开发在线投票应用程序-JavaScript中文网-JavaScript教程资源分享门户

简介

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" 选项卡并复制以下代码：

<script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-database.js"></script>
<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    databaseURL: "https://PROJECT_ID.firebaseio.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
    measurementId: "G-MEASUREMENT_ID"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

将上述代码复制到 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 文件中，添加以下代码：

<form (submit)="onSubmit()">
  <h2>Which is your favorite color?</h2>
  <div>
    <input type="radio" name="color" value="red" [(ngModel)]="vote.color" required>
    <label for="red">Red</label>
  </div>
  <div>
    <input type="radio" name="color" value="blue" [(ngModel)]="vote.color" required>
    <label for="blue">Blue</label>
  </div>
  <div>
    <input type="radio" name="color" value="green" [(ngModel)]="vote.color" required>
    <label for="green">Green</label>
  </div>
  <button type="submit">Vote</button>
</form>

这将创建一个表单，用于收集用户投票。当用户提交表单时，将调用 onSubmit() 方法。

然后，在投票组件的 TypeScript 文件中，添加以下代码：

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-vote',
  templateUrl: './vote.component.html',
  styleUrls: ['./vote.component.css']
})
export class VoteComponent {
  vote = { color: '' };
  votes: Observable<any[]>;

  constructor(private db: AngularFireDatabase) {
    this.votes = db.list('votes').valueChanges();
  }

  onSubmit() {
    this.db.list('votes').push(this.vote);
    this.vote = { color: '' };
  }
}

这将创建一个投票组件，用于收集用户投票并将其保存到 Firebase 数据库中。在构造函数中，我们使用 AngularFireDatabase 获取 Firebase 数据库的引用。然后，在 onSubmit() 方法中，我们将投票信息保存到 Firebase 数据库中。

最后，在 app.module.ts 文件中，添加以下代码：

import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';

@NgModule({
  declarations: [
    AppComponent,
    VoteComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这将在应用程序中添加 AngularFireModule 和 AngularFireDatabaseModule，用于连接 Firebase 数据库和 Angular2 应用程序。

运行应用程序

现在，我们已经创建了一个基本的在线投票应用程序。使用以下命令启动应用程序：

ng serve

然后，在浏览器中访问 http://localhost:4200，即可访问应用程序。

总结

本文介绍了如何使用 Angular2 和 Firebase 构建一个基本的在线投票应用程序。本文详细介绍了如何使用 Angular2 和 Firebase 实现投票功能，并提供了示例代码。希望本文对您有所帮助，谢谢阅读！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65c0b40cadd4f0e0ffab267e