简介
Angular5 和 Firebase 是两个相互独立的前端技术，但它们可以很好地结合在一起来创建一个完整的单页应用程序（SPA）。本教程将介绍如何使用这两种技术来创建一个简单的 SPA 应用程序。
准备工作
在开始之前，你需要安装以下工具：
- Angular CLI：用于创建 Angular 应用程序的命令行工具。
- Firebase CLI：用于配置和部署 Firebase 应用程序的命令行工具。
你还需要一个 Firebase 帐户。如果你没有帐户，请先注册一个。
创建 Angular 应用程序
首先，我们需要使用 Angular CLI 创建一个新的 Angular 应用程序。在命令行中运行以下命令：
ng new my-app cd my-app
这将创建一个名为 my-app 的新 Angular 应用程序，并将你切换到该目录。
集成 Firebase
接下来，我们需要集成 Firebase 到我们的应用程序中。首先，我们需要在 Firebase 控制台中创建一个新的项目。在控制台中，单击“添加项目”按钮并按照指示操作。
完成后，我们需要在我们的应用程序中添加 Firebase SDK。在命令行中运行以下命令：
npm install firebase --save
这将安装 Firebase SDK 并将其添加到我们的 package.json 文件中。
接下来，我们需要在我们的应用程序中添加 Firebase 配置。在 src/app/app.component.ts 文件中，添加以下代码：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - -- -------- ---- ----------- ----- ------ - - ------- --------------- ----------- ------------------- ------------ -------------------- ---------- ------------------ -------------- ---------------------- ------------------ -------------------------- -- ------------------------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ----- - --------- -展开代码
请记得将 YOUR_API_KEY、YOUR_AUTH_DOMAIN、YOUR_DATABASE_URL、YOUR_PROJECT_ID、YOUR_STORAGE_BUCKET 和 YOUR_MESSAGING_SENDER_ID 替换为你的 Firebase 项目的实际值。
创建一个简单的 SPA 应用程序
现在，我们已经准备好开始创建我们的 SPA 应用程序了。在本教程中，我们将创建一个简单的待办事项应用程序。
首先，我们需要创建一个待办事项组件。在命令行中运行以下命令：
ng generate component todo-list
这将创建一个名为 todo-list 的新组件，并将其添加到我们的应用程序中。
接下来，我们需要在 todo-list.component.ts 文件中添加以下代码：
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - -- -------- ---- ----------- ------------ --------- ---------------- ------------ ----------------------------- ---------- ----------------------------- -- ------ ----- ----------------- ---------- ------ - ------ ------ ------------- - - ---------- - -------------------------------------------- ---------- -- - ----- ----- - --------------- ---------- - ---------------------------- -- - ------ - --- ---- ----- ---------------- ---------- -------------------- -- --- --- - --------- - ----- ---- - ------------- - --- ---- ------- --------------------------------------- ----- ----- ---------- ----- --- - --------------------- - -------------------------------- - ----------------- ---------- --------------- --- - ------------ - -------------------------------- - ------------------ - -展开代码
这个组件负责显示所有的待办事项，并允许用户添加、完成和删除待办事项。我们使用 Firebase 实时数据库来存储和同步所有的待办事项。
接下来，我们需要在 todo-list.component.html 文件中添加以下代码：
-- -------------------- ---- ------- -------- --------- ---- --- ----------- ---- -- ------- ----- ---------------------------------- ---------------------------------- --------- --------- ------- -------------------------------------- ----- ----- ------- ----------------------- -------------展开代码
这个模板简单地将所有的待办事项显示为一个无序列表，并允许用户添加、完成和删除待办事项。我们使用 Angular 的数据绑定和事件绑定来连接模板和组件。
部署应用程序
现在，我们已经完成了我们的 SPA 应用程序的开发。最后一步是将它部署到 Firebase 上。
首先，我们需要使用 Firebase CLI 初始化我们的应用程序。在命令行中运行以下命令：
firebase init这将启动 Firebase CLI 的初始化过程。按照指示操作，选择 Hosting 选项并使用默认设置。
接下来，我们需要构建我们的应用程序并将其部署到 Firebase。在命令行中运行以下命令：
ng build --prod firebase deploy
这将构建我们的应用程序并将其部署到 Firebase。完成后，你可以在 Firebase 控制台中找到你的应用程序的 URL。
结论
恭喜！你已经成功地创建了一个简单的 SPA 应用程序，并使用 Angular5 和 Firebase 将其部署到了 Firebase 上。希望这个教程对你有所帮助，并能够启发你在未来使用这些技术来创建更加复杂和强大的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6769207a98e3e1ab1a8c0af4
