How To Create A Web App Using Angular And Backendless | Backend as a Service Platform

Message:

Subscribe rss
Blog categories
All | Backendless features
How To Create A Web App Using Angular And Backendless
May 30, 2018 by Vladimir Upirov

Today we will talk about the integration of Backendless into your AngularJS/TypeScript app. You will create a simple Address Book application where all the application data will be stored in the Backendless mobile backend. The main goal of this article is to provide step-by-step instructions and to show how to create an Angular application with Backendless mBaaS.

BackendlessAngular 10 - How To Create A Web App Using Angular And Backendless

Setup Environment

In order to start developing our application, we will  need to setup the environment first:

  1.  NodeJS should be installed on your machine.
  2. Also, you would need to install the Angular CLI package globally, if you already have it, just skip this step, otherwise, execute the following line in the Terminal:

Alright, we have set everything up, and now, let’s generate our app and run it:

Once it is done, the application will be running at http://localhost:4200, you can check it in your browser.

In case of a proper setup, you should see this web page:

BackendlessAngular 1 - How To Create A Web App Using Angular And Backendless

Add Styles

In order to style the app we will use the Bootstrap framework, which will add a high-quality and modern “look and feel” to the app.

Just add a few lines into index.html as it is described here:

Now, change the  app.component.html file by replacing the file’s content using the folllowing code:

Setup Backendless

Make sure you have a Backendless developer account. If you do not have one, you can register at: https://develop.backendless.com

BackendlessAngular 2 - How To Create A Web App Using Angular And Backendless

Also, you would need to have a Backendless App created, in my case, it is called backendless_angular_article.

Tp enable client-server communication between the app and Backendless, we will use the Backendess SDK for JS.  It is completely compatible with TypeScript, therefore you don’t need to worry about any other dependencies for using Backendless API inside of your TypeScript applications. Let’s install the Backendless SDK for JS from NPM:

Now we are going to add Backendless API keys into our app. To do that, open your Backendless App Dashboard and you will see the panel with the API keys. For our application, you need both APP_ID  and JS_API_KEY

BackendlessAngular 3 1024x560 - How To Create A Web App Using Angular And Backendless

You can find these keys on the Manage > App Settings screen as well.

BackendlessAngular 4 - How To Create A Web App Using Angular And Backendless

Let’s get back to Angular CLI, where we will create a file  environments/environment.ts, and add the API keys there:

Let’s include and initialize Backendless JS-SDK in our project. To do that, just add a few lines of code to app.module.ts as shown below:

Create the Persons List Component

Angular CLI has a command for components creation, so let’s use it:

It will generate a persons-list directory with the TS/HTML/CSS files.

Once it is created, modify the HTML and TS files as shown below:

Now we can include the component into our app.component HTML file:

The list is rendered, so just check it in your web browser:

BackendlessAngular 5 - How To Create A Web App Using Angular And Backendless

Create Persons Service

As you may have noticed, we render a dummy list of persons, so let’s just create a simple service for Persons data.

Angular CLI also has a command for services generation:

Let’s move our dummy persons list into PersonsService and inject the service into PersonsListComponent.

To do that, modify both  persons.service.ts  and persons-list/persons-list.component.ts  files.

Integrate Backendless Data

It’s time to use some real data from the Backendless backend. Let’s put our dummy persons list into Backendless. Firstly, we need to create a new table on the Data screen in Backendless console:

BackendlessAngular 6 - How To Create A Web App Using Angular And Backendless

Then, we are going to import all the dummy persons into the table. REST Console in Backendless will help us with that:

BackendlessAngular 7 - How To Create A Web App Using Angular And Backendless

Check this out in the Data Browser:BackendlessAngular 8 - How To Create A Web App Using Angular And Backendless

As you can see, we don’t do any additional steps to set up the SCHEMA for Person table, but there are two columns name and address created already. These columns were created because the dynamic schema definition is turned on by default, and once we’ve saved our dummy person objects in REST Console, the server automatically created these two columns for us. It’s a great feature for development but for production, we recommend to turn it off.

BackendlessAngular 9 - How To Create A Web App Using Angular And Backendless

Let’s add some logic for retrieving the persons’ objects in our app. To achieve that, we need to change the  persons.service.ts file:

Here is how we can add the Person  type to our application. Just create a Person  class and fix all the declarations:

As you can see, using types with Backendless SDK for JS is not complicated, you just need to define the expected result type:

Adding New Persons

Time to implement the ‘adding a new item’ option into our Address Book.

Generate a new component with Angular CLI as we did before:

ng g component add-new-person

And just replace contents for some files (the file names are in the comments in the first line of each block below):

Include the component into our app-component:

Add a new method to the PersonsService  class for saving new persons in Backendless:

Also, we need to import FormsModule  into app.module.ts file, the following code should be added to the end of this file:

Build And Deploy It To Backendless

Now I want to show you another Backendless feature. Let’s build our application:

Once it’s done, you need to zip the generated files (zip the backendless-angular  directory): 

BackendlessAngular 12 - How To Create A Web App Using Angular And Backendless

Open the Backendless console and switch to the Files section of your app. Upload the zip by either using the Upload file menu or simply dragging the file from your computer into Backendless console. Once uploaded, use the Unzip file icon as shown below.
BackendlessAngular 13 1024x593 - How To Create A Web App Using Angular And Backendless

When the zip is expanded, Backendless will create a directory which includes all the contents of the zip file. Click the directory to navigate to it.

Now, we need to add some fixes to our index.html file. Just open index.html for editing and remove <base href="/">  line.  Once done, just save and close the popup:

BackendlessAngular 10 1024x589 - How To Create A Web App Using Angular And Backendless

Finally, let’s open our deployed application by copying the index.html  URL as shown below. The copied URL can be pasted in a new browser window to launch the app.

BackendlessAngular 14 1024x591 - How To Create A Web App Using Angular And Backendless

Here we go, the application is hosted in Backendless where it also loads/saves all the data from/to:

BackendlessAngular 15 - How To Create A Web App Using Angular And Backendless

 Summary

We created a simple application with some real data stored on the server in a few minutes. Also, we learned how to publish an Angular application to Backendless where it can be launched from. You can take a look at the demo app here. Also, check the project source code on github.com. If you would like to see the changelog of the features added to Backendless considering Angular CLI, go the following link backendless-angular/commit

We are planning to release Backendless 5.0 soon. In the next article, I’ll show you how to integrate RealTime services into our application.

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

Share this post
Tweet about this on TwitterShare on FacebookGoogle+