Message:

Subscribe rss
Blog categories
All | Backendless features
How to use the Backendless Real-Time database in your Angular App
June 8, 2018 by Vladimir Upirov

Great news, guys! Backendless 5 is now released and it’s time to show you some new features we’ve been working on.  In this article we will talk about how to integrate the Backendless Real-Time Database into your Angular application. Meanwhile, you can check out the previous version of our Angular app in this post. In case you haven’t read the post and don’t have that app  yet, please review the previous article, because we will use that application as a starting point for this tutorial. Or, if you just want to start working with the it right away, just download the source code from this GitHub commit.

ezgif 5 83e7494ea4 - How to use the Backendless Real-Time database in your Angular App

The first thing we would need to do is to update Backendless JS-SDK to the latest version. Run the following command inside of your project’s directory:

At the end of the response, you should see something like this:

Alright, now, once the package is updated, we need to make sure our application is still working as before. Run your app and make sure everything works fine.

What is Real-Time Database?

In most cases, you want your application to display the up-to-date data without any additional requests to the server. There are three events, which, once occurred, get your clients app synced with the server data:

  • create  – this event is delivered to the client app when a new object is created on the server
  • update  – this event is delivered to the client app when an existing object is changed on the server
  • delete  – this event is delivered to the client app when an existing object is deleted on the server

All our SDKs (JS, Android, and iOS) have been updated with the logic responsible for establishing a connection to our Real-Time servers and provide you with the ability to subscribe to the events shown above.

Check out the Real-Time Database API documentation for more information.

Integrate Real-Time Updates

Let’s modify our persons.service.ts, just replace your existing content with the following sample code:

Now let’s review some changes, that we have actually made:

  • added a new property objectId to the  Person class
  • changed the  add method, where we don’t need to pull the created object into the list of persons. Instead, an event listener was created to do it for us automatically.
  • added event listeners for the create | update | delete  events, it will keep our client data up to date with the server data

Now let’s test it, just open a browser page with our application in one window and Backendless Console in another window:Data Browser backendless angular article Backendless 2018 06 07 21 19 22 - How to use the Backendless Real-Time database in your Angular App

Add a new Person object in Data Browser and you will see that a new Person immediately appears in our app, in some cases, it might be even faster than in Backendless Console.

Now you can play with it, try to add, change and remove Persons in Data Browser or Rest Console or using the Data Service APIs, and you will always have the synced data in your app.

Summary

As you can see, it was really easy to integrate Real-Time Database into our app. All the changes we made today can be found in this GitHub commit. The demo app has been updated, and you can take a look at it by following this link.

In the next posts, we will show you how to easily add UserService into the app and how to use Business Logic for our application and will touch on many other things.  

Thank you for reading this post, hope you enjoyed it!

Share this post
Tweet about this on TwitterShare on FacebookGoogle+