Back to blog home page

AngularJS Mobile Apps with Ionic and Backand

Posted by on Oct 13, 2015

Using Ionic? you need a back-end! In this blog we provide a simple, step-by-step guide for building Ionic mobile apps with Backand’s backend-as-a-service (BaaS) for AngularJS. You can find the example code on github.

What is the Ionic Framework?

The Ionic framework is a mobile programming framework for constructing hybrid mobile apps. Hybrid mobile apps use web technology (HTML, JavaScript, CSS) to build cross-platform mobile apps (iOS, Android). Ionic is built on the Cordova hybrid app technology.

The major advantage of using Ionic over Cordova, or its commercial version PhoneGap, is that it provides a plethora of mobile user interface templates both for the entire structure of the app (side menu, tabs) and for common parts (top navigation bar).

Ionic is built using the popular AngularJS web MVC framework. Hence, developing Ionic apps is done at a higher level of abstraction than using plain HTML and jQuery. To facilitate working with the mobile device APIs in the AngularJS way, Ionic developed ngCordova, a set of AngularJS components for interacting with the various mobile device capabilities (such as taking pictures). Ionic also provides a set of convenient command line tools for building and running apps.

What is Backand?

By taking care of all the server-side and hosting hassles, including security, user management and 3rd party integrations,  Backand allows AngularJS developers to focus solely on the front-end of their apps .

Building a Mobile App with Back& and Ionic Step-by-Step

Follow these steps to build a mobile app with Ionic and Backand:

Backand

If you don’t have a Backand account yet, you can create one for free here. Create an app in Backand using the free database (“New Hosted Database”). For this example we will show a simple ‘List’ app with 2 objects: items and users.
You can use the default schema or copy it from the following JSON model:

Ionic

Now create your mobile app, naming it ‘MyItems’, with the Ionic command-line tools – Getting Started with Ionic.

JavaScript Libraries

Your Ionic app has a ‘www’ folder which is a single-page application (SPA) built with AngularJS. You will need to include the Backand SDK in your app. Either use bower or the CDN link to obtain it.

To use the CDN in ‘index.html’ just copy the following line:

Or, Install using bower:

Include in ‘index.html’:

Configuration

In your main ‘js’ file, ‘app.js’, add the ‘backand’ module dependencies to your angular app definition:

And in your app ‘config’ set the app name and tokens:

Authorization

Backand uses authorization headers in HTTP requests. The token for authorization is obtained upon sign-in to Backand and then stored in local storage. The Backand SDK adds authorization headers to each HTTP request using an HTTP interceptor.

Sign In

In your login controller require ‘Backand’:

To perform the login just call the signin method:

CRUD

Now you will need to define a service to perform REST operations:

Using Backand Data

In your controller, require ‘ItemsModel’, and make calls like this:

Now you can add more objects and build more pages by repeating the above steps. You can also add server-side code in the Backand cloud service under the Actions tab.

To review the code in GitHub: full working app.

Sign up to Backand and start creating your app today.