How to build an Angular app without backend? — Angular+Firebase

Here we are going to learn how to develop an Angular 8.0 application without writing any backend code.

Alekya Ragipally
3 min readMay 22, 2020
Angular 8.0

Every newbie programmer who is learning Angular wants to develop some dynamic applications by storing, fetching, deleting data to/from the database, but they need backend code for that! Today we are going to develop a simple dynamic angular application without writing any backend code by using the FIREBASE console.

First we need to create an angular project. Check this out to create an angular project if you are new to it.

As our angular project is ready now, we need to create our account in Firebase. Search for Firebase console in your browser and complete the registration process.

After successful creation of your account, you can see an option to Add Projects as below,

Add Project Screen

Click on Add project and follow the instructions for the successful creation of the project. Below is the screen you get after successful creation of the project.

Select Database from the menu bar and create the database in test mode.

After completing the creation select the realtime database instead of Cloud Firestone.

Now, our backend part is ready, we need to start developing our frontend part. You can find the URL in the Firebase to connect to the backend in the Database menu Data tab.

First we need to store data into the database to fetch it later. Add anyname.json to the URL above to save data.

Storing Data
Fetching Data

This is how you fetch the data, as you can see “post.json” in both the calls, you can give any name of your choice but while fetching data you need to give the same name you gave while storing data.

This is a simple example for connecting with Firebase, there are many more options available in Firebase, you also have the option to authenticate your application(login & logout functionality) very easily using Firebase.

I hope you understood, feel free to ask your queries in the comment section.

Thank you!

--

--

Alekya Ragipally

Hello World, I am an aspiring full-stack web developer and a tech enthusiast.