In the previous part of the series, we designed and implemented an interface to create a blog post with a title and post. In this part, we'll see how to fetch the blog posts saved in Firebase and render them on our welcome page.

Structuring the Data in Firebase

Earlier when we inserted data into Firebase, we simply pushed the data to the Firebase URL and it was listed randomly in Firebase. But when data grows and everything gets pushed to Firebase it gets difficult to maintain the data. So we'll try to organize our data, which will make querying from Firebase easier.

Log in to Firebase and go to Manage App. You should see the Firebase URL on the dashboard screen as shown below:

Click on the plus icon next to the URL and create a sub node called Articles with a value 0 and click Add. Once a sub node is added, you should have something like:

As you can see, we have categorized the Articles data separately, so that it will be easy to query and fetch data.

Now, navigate to addPost.js and modify the Firebase URL to https://blistering-heat-2473.firebaseio.com/Articles. Let's also add the email ID of the user related to the blog post. We can get the email ID from the CommonProp service that we wrote earlier. Simply inject the CommonProp service in the AddPostCtrl controller.

Save all the changes and restart the server. Try to sign in using a valid email address and password and create a blog post. Now if you have a look at the Firebase dashboard you should see the post details in the Articles sub node as shown:

Render Posts on the Welcome Page

Next, let's add a Bootstrap list group component to show posts created by a user. Navigate to app/welcome/welcome.html and inside the div with class container, after the welcome message, add the list group component as shown:

We'll be using $firebase to get data from Firebase. As per the official docs:

The $firebase wrapper is used for synchronizing Firebase data with Angular apps. It contains some helper methods for writing data to Firebase, as well as tools for reading data into synchronized collections or objects.

var sync = $firebase(firebaseObj);

In order to get data from the Firebase URL as a synchronized array, AngularFire provides a method called $asArray. Let's call the $asArray method on sync object and assign it to another $scope variable.

$scope.articles = sync.$asArray();

Also add a paragraph element on the welcome page as shown:

<p>{{articles}}</p>

Save all the changes and restart the server. Sign in with a valid email address and password. Once on the welcome page, you should have the query result as JSON data in the $scope.articles binding element.

Binding the Query Result Using AngularJS

Since we have the data queried from Firebase in the $scope.articles variable, we can bind the data to our welcome page list element. We'll use the AngularJS directive ngRepeat to repeat the data across the Bootstrap list group. Here is the list group HTML:

Fixing a Couple of Minor Issues

Redirect After Creating a Post

Once the post has been added, we need to redirect the user to the welcome page. Open app/addPost/addPost.js and inject $location in the AddPostCtrl controller. On fb.$push success callback, add a redirect to the welcome page.

Link the Welcome Page to Add Post

Open up app/welcome/welcome.html and modify the Add Post link href to redirect to the Add Post page as shown:

<a class="blog-nav-item " href="#/addPost">Add Post</a>

Save all the changes and restart the server. Sign in with a valid email address and password and try to create a post, and you should be able to view the post on the welcome page list.

Conclusion

In this tutorial, we saw how to query the data stored in Firebase using AngularFire. We created an interface to render the blog post created by a user as a list on the welcome page. We also fixed a couple of small issues.

In the next part of the series, we'll take this to the next level by implementing a few more features like editing and deleting the blog posts.

Source code from this tutorial is available on GitHub. Do let us know your thoughts in the comments below!