在本系列的前一部分中，我们设计并实现了一个界面来创建带有标题和帖子的博客文章。在这一部分中，我们将了解如何获取 firebase 中保存的博客文章并将其呈现在我们的欢迎页面上。
开始使用我们首先从 github 克隆本教程的前一部分。
git clone https://github.com/jay3dec/angularjs_firebase_part4.git
克隆源代码后，导航到项目目录并安装所需的依赖项。
cd angularjs_firebase_part4npm install
安装依赖项后，启动服务器
npm start
将浏览器指向 http://localhost:8000/app/#/home，应用程序应该正在运行。
在 firebase 中构建数据之前，当我们将数据插入 firebase 时，我们只是将数据推送到 firebase 网址，然后它会在 firebase 中随机列出。但是，当数据增长并且所有内容都推送到 firebase 时，维护数据就会变得困难。因此，我们将尝试组织数据，这将使 firebase 查询变得更加容易。
登录 firebase 并转到管理应用。您应该在仪表板屏幕上看到 firebase url，如下所示：
单击 url 旁边的加号图标并创建一个名为 articles 的子节点，其中值 0 并单击添加。添加子节点后，您应该看到类似以下内容：
可以看到，我们对文章数据进行了单独分类，这样就方便查询和获取数据。
现在，导航至 addpost.js 并将 firebase 网址修改为 https://blistering-heat-2473.firebaseio.com/articles。我们还添加与博客文章相关的用户的电子邮件 id。我们可以从我们之前编写的 commonprop 服务中获取电子邮件 id。只需在 addpostctrl 控制器中注入 commonprop 服务即可。
.controller('addpostctrl', ['$scope','$firebase','commonprop',function($scope,$firebase,commonprop) {
推送数据时，还包括电子邮件 id 参数。这是修改后的 addpost 函数：
$scope.addpost = function() { var title = $scope.article.title; var post = $scope.article.post; var firebaseobj = new firebase(https://blistering-heat-2473.firebaseio.com/articles); var fb = $firebase(firebaseobj); fb.$push({ title: title, post: post, emailid: commonprop.getuser() }).then(function(ref) { console.log(ref); }, function(error) { console.log(error:, error); });}
保存所有更改并重新启动服务器。尝试使用有效的电子邮件地址和密码登录并创建博客文章。现在，如果您查看 firebase 仪表板，您应该会在 articles 子节点中看到帖子详细信息，如下所示：
在欢迎页面上呈现帖子接下来，让我们添加一个 bootstrap 列表组组件来显示用户创建的帖子。导航到 app/welcome/welcome.html 并在类为 container 的 div 中，在欢迎消息后添加列表组组件，如下所示：
<div class=list-group> <a href=# class=list-group-item active> <h4 class=list-group-item-heading>title heading</h4> <p class=list-group-item-text>blog post content </p> </a></div>

保存更改并重新启动服务器。尝试使用有效的电子邮件地址和密码登录。在欢迎页面上，您应该看到类似以下内容：
从 firebase 查询数据接下来，我们使用 url https://blistering-heat-2473.firebaseio.com/articles 从 firebase 查询数据。
打开 welcome.js，并在 welcomectrl 控制器内使用上述网址创建一个 firebase 对象。
var firebaseobj = new firebase(https://blistering-heat-2473.firebaseio.com/articles);
我们将使用 $firebase 从 firebase 获取数据。根据官方文档：
$firebase 包装器用于将 firebase 数据与 angular 应用同步。它包含一些用于将数据写入 firebase 的辅助方法，以及用于将数据读取到同步集合或对象中的工具。var sync = $firebase(firebaseobj);
为了从 firebase url 获取数据作为同步数组，angularfire 提供了一个名为 $asarray 的方法。让我们在同步对象上调用 $asarray 方法并将其分配给另一个 $scope 变量。
$scope.articles = sync.$asarray();
还在欢迎页面上添加一个段落元素，如下所示：
<p>{{articles}}</p>
保存所有更改并重新启动服务器。使用有效的电子邮件地址和密码登录。进入欢迎页面后，您应该在 $scope.articles 绑定元素中获得 json 数据形式的查询结果。
[{ emailid: jim@jim.com, post: this is my first post on this platform., title: hello !!}, { emailid: jim@jim.com, post: good night for tonight, title: goodbye}]
使用angularjs绑定查询结果由于我们在 $scope.articles 变量中拥有从 firebase 查询的数据，因此我们可以将数据绑定到欢迎页面列表元素。我们将使用 angularjs 指令 ngrepeat 在 bootstrap 列表组中重复数据。以下是列表组 html：
<div class=list-group> <a href=# class=list-group-item active> <h4 class=list-group-item-heading>title heading</h4> <p class=list-group-item-text>blog post content </p> </a></div>

将 ngrepeat 指令添加到主 div 中，如图所示。
ng-repeat=article in articles
ngrepeat 指令迭代articles 变量并在列表组div 中为每个项目创建html。因此，修改显示的 html 代码：
<div class=list-group ng-repeat=article in articles> <a href=# class=list-group-item active> <h4 class=list-group-item-heading>{{article.title}}</h4> <p class=list-group-item-text>{{article.post}}</p> </a></div>
保存更改并重新启动服务器。使用电子邮件地址和密码登录，进入欢迎页面后，您应该会看到从“添加帖子”页面添加的文章列表。
现在导航至 http://localhost:8000/app/#/addpost 并添加另一篇帖子。由于我们在创建帖子后尚未添加到欢迎页面的重定向，因此请手动导航到 http://localhost:8000/app/#/welcome，您应该会在列表中看到它。
修复几个小问题创建帖子后重定向添加帖子后，我们需要将用户重定向到欢迎页面。打开 app/addpost/addpost.js 并在 addpostctrl 控制器中注入 $location 。在 fb.$push 成功回调中，添加重定向到 welcome 页面。
fb.$push({ title: title, post: post, emailid: commonprop.getuser()}).then(function(ref) { console.log(ref); $location.path('/welcome');}, function(error) { console.log(error:, error);});
链接欢迎页面以添加帖子打开 app/welcome/welcome.html 并修改添加帖子链接 href 重定向到添加帖子页面，如图所示：
<a class=blog-nav-item href=#/addpost>add post</a>
保存所有更改并重新启动服务器。使用有效的电子邮件地址和密码登录并尝试创建帖子，您应该能够在欢迎页面列表中查看该帖子。
结论在本教程中，我们了解了如何使用 angularfire 查询 firebase 中存储的数据。我们创建了一个界面，将用户创建的博客文章呈现为欢迎页面上的列表。我们还修复了一些小问题。
在本系列的下一部分中，我们将通过实现更多功能（例如编辑和删除博客文章）将其提升到新的水平。
本教程的源代码可在 github 上获取。请在下面的评论中告诉我们您的想法！
以上就是使用 angularjs 和 firebase 构建 web 应用程序：第 5 部分的详细内容。