ngSyncano Series: The Basics

Devin VisslailliDevin Visslailli

Inject Syncano seamlessly into your AngularJS application with our new ngSyncano library. This first post in our "ngSyncano Series" will show you how.

Using ngSyncano

Here at Syncano we have created a specific AngularJS library to make it even easier to use Syncano API calls within your Angular Application. It simply wraps the Javascript Library that we already have, but allows you to inject it into your application as a service.

There are two parts to the ngSyncano library. The first is a provider. This provider allows your to set up your API details in the configuration of your application, so you don't have to create a Syncano object anywhere else in your code! We have provided the ability to set up the config with not only your API Key and Instance Name, but also user details.

The second part is the ngSyncano service. This service creates the Syncano object and returns it to you, but also allows you to add, change, and remove Syncano user details in case the need for a User Key exists. Let's look closer at how to use it!

if you would like to look at the code directly, you can visit this github repo and look in the src/ folder.

Getting Started

Using ngSyncano is simple! After you set it up, you'll be able to use Syncano API calls within Angular without having to import syncano.js anywhere else in your code.

If this is your first time using Angular, please take a look at our blog post Intro to Angular.js or the AngularJS homepage.

This library is intended to be used with a Syncano account. If you don't already have one - you can sign up here.

The first step is to install it in your application:

Install from Bower

bower install ng-syncano --save  

Install from NPM

npm install ng-syncano --save  

Injecting ngSyncano

Once you have put the ng-syncano.js or ng-syncano.min.js file in your js or services folder, you'll need to import ngSyncano so you can use it's API calls and services.

In your app.js file or the file that contains code that looks something like this:

var myApp = angular.module('myApp', []);  

You'll need to insert the ngSyncano keyword in between the brackets like this:

var myApp = angular.module('myApp', ['ngSyncano']);  

Setting Up The Config

Next you'll need to set up the config part of your app so that Syncano knows what your API details are.

In that same app.js file, put the following code:

myApp.config(function (syncanoConfigProvider) {  
    syncanoConfigProvider.configure({
        apiKey: 'APIKEY/ACCOUNTKEY',
        instance: 'INSTANCE'
    });
});

Be aware that if you use more than one config for ngSyncano, only the first one will be used!

Config with a User Key

Most API calls will require more authentication or a higher level API key. The one we suggest using for your public app is a public API key. This key will need a user key to provide you with access to more permissions and API calls.

We have set up the ngSyncano library so you can start your app with a username and password. The code below shows you how!

myApp.config(function (syncanoConfigProvider) {  
    syncanoConfigProvider.configure({ // enter Syncano details
        apiKey: 'MY_PUBLIC_API_KEY',
        instance: 'MY_INSTANCE'
        username: 'USERNAME',
        password: 'PASSWORD'
    });
});

This would replace your original config function!

That's it for the syncanoConfigProvider. From this point forward you'll be using the syncanoService.

Using the syncanoService In Your Controller

After you have completely set up the config for ngSyncano in your app, you will need to inject the Syncano Service into your controller.

To use the Syncano API calls in your Angular controller, just include syncanoService in the function of your controller (see the code below). The syncanoService will allow you to do a few things:

  1. Get the current Syncano object (global)
  2. Add a User Key
  3. Remove a User Key
  4. Retrieve User Details (when you sign in)

Then you just use the regular JS Library API calls to perform the rest of your Syncano API calls.

myApp.controller('SyncanoController', function ($scope, syncanoService) {  
    var syncano = null; // will be used for API calls
    $scope.dataRetrievedFromSyncano = null;
    $scope.error = null;

    syncanoService.getSyncano() // gets the current Syncano object
        .then(function(res){ // uses promises
            syncano = res; // set to current Syncano Object

            /* TO REMOVE A USER */
            //syncanoService.removeSyncanoUser(); // returns string

            /* TO LOG IN */
            //var user = {
                //"username": "USERNAME",
                //"password": "PASSWORD"
            //};
            //syncanoService.setSyncanoUser(user)
                //.then(function(res){
                    //syncano = res;
                    /* USER DETAILS */
                    syncano.userDetails
                //})
                //.catch(function(err){
                    //console.log(err);
                //});
        })
        .catch(function(err){
            console.log(err);
        });
});

The syncano object will contain all of your API details, so you won't need to type them in again. You'll notice that the getSyncano() call expects a promise. This is done so that you can choose to either include user info at the beginning, or leave them out, but the library will always send a promise back.

Note: All functions needing Syncano data will need to be called inside the .then() of the getSyncano() call! This is because that call is asynchronous and uses promises.

Once you have imported syncanoService and have used it for an API call, the last step is to display it in the DOM or html page! That's where you get creative ;)

It's Your Turn

I'd love to see the types of things you can build with this library! With control over your data, and the wonderful framework of AngularJS, the possibilities are endless! Tweet @DevinViss or @Syncano and post a link to your Angular App!

Look here for more examples on our JS Library API calls.

For more details see example.html in this github repo.

Build powerful apps in half the time

Use our serverless platform to set up your backend in minutes.

Learn more

Developer Evangelist. Angular enthusiast, Early Adopter. New technology always inspires me, and I find myself constantly working to innovate and create integrations between the real world and tech.