使用AngularJS和Firebase从头开始创建Web应用程序：第5部分

最新推荐文章于 2025-12-26 18:13:00 发布

翻译最新推荐文章于 2025-12-26 18:13:00 发布 · 171 阅读

文章标签：

#java #python #vue #javascript #js #ViewUI

本文介绍如何使用AngularJS和Firebase构建博客应用，包括数据组织、查询和展示。

在本系列的前一部分中，我们设计并实现了一个界面，以创建带有标题和帖子的博客帖子。在这一部分中，我们将看到如何获取保存在Firebase中的博客文章并将其呈现在我们的欢迎页面上。

入门

首先，从GitHub克隆本教程的上一部分。

git clone https://github.com/jay3dec/AngularJS_Firebase_Part4.git

克隆源代码后，导航到项目目录并安装所需的依赖项。

cd AngularJS_Firebase_Part4
npm install

安装依赖项后，启动服务器

npm start

将浏览器指向http：// localhost：8000 / app /＃/ home ，您应该运行该应用程序。

在Firebase中构建数据

早些时候，当我们将数据插入Firebase时，我们只是将数据推送到Firebase URL，并在Firebase中随机列出了该数据。但是，当数据增长并且一切都被推送到Firebase时，将很难维护数据。因此，我们将尝试组织数据，这将使从Firebase的查询更加容易。

登录到Firebase并转到“ 管理应用程序” 。您应该在仪表板屏幕上看到Firebase URL，如下所示：

单击URL旁边的加号图标，然后创建一个名为Articles的子节点，其值为0，然后单击Add 。添加子节点后，您应该具有以下内容：

如您所见，我们已经将Articles数据分别分类，以便于查询和获取数据。

现在，导航至addPost.js并将Firebase URL修改为https://blistering-heat-2473.firebaseio.com/Articles 。我们还要添加与博客文章相关的用户的电子邮件ID。我们可以从我们之前编写的CommonProp服务中获取电子邮件ID。只需在AddPostCtrl控制器中注入CommonProp服务AddPostCtrl 。

.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并在div中使用类container ，在欢迎消息之后，添加列表组组件，如下所示：

<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控制器内部使用上述URL创建一个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并将$location注入AddPostCtrl控制器中。在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上获得。请在下面的评论中告诉我们您的想法！

翻译自: https://code.tutsplus.com/tutorials/creating-a-web-app-from-scratch-using-angularjs-and-firebase-part-5--cms-22809