ngSyncano Series: A Simple List

Devin VisslailliDevin Visslailli

Inject Syncano seamlessly into your AngularJS app with ngSyncano. This second post in our series teaches you how to make a simple list synced with Syncano.

Welcome to the 2nd part of our ngSyncano Series. Just as a recap, this series is designed to walk you through the functionality of ngSyncano and the Syncano Javascript Library, as well as provide you with simple ways to use the Syncano API. Each app from this tutorial series is written using AngularJS (version 1.4.x).

Before you read through this guide, I would strongly recommend reading the first part of this series to understand how to properly set up the ngSyncano library in your application.

If you don't already have a Syncano account, and you want to build these apps yourself, visit the Syncano homepage and sign up!

These tutorials assume a basic understanding of how to construct an AngularJS application. If you wish to learn more about how to build one, visit their tutorial page or browse through their docs.

Follow along with the code!

The /dist/ folder this links to contains the release version for download.

The App - dataList

Clicking on the link above will direct you to the app for this specific tutorial.

Next, we'll break down each piece of this app, explaining both the Angular methods and the Syncano API calls. There is also a brief description under the app itself.

Setting Up Syncano

The very first thing you'll need to do before you can build this application yourself, is to properly set up your Syncano class. You'll need a class that has one custom field - title.

Then write down the name of your class so you can use it later.

Learn how to create a class here.

Behind the Scenes

When the app initially loads (assuming you have put in your Syncano details as described in the previous part of this series), a Syncano API call is made to get the data for the initial list using the function getData() as seen below:

// (js/app.js)
function getData() {  
            // load the array of data objects
            $scope.dataList = res.objects;
            $scope.error = err;

Replace 'CLASS' with the class you want to use from your Syncano instance.

More on classes here.

This function makes a call to Syncano using the configured syncanoService to get a list() of the data objects in your specified class. Once the data is retrieved, it is stored in a $scope object called $scope.dataList.

This object will now contain an array of objects which were returned by the Syncano API call. We'll be using the title and the id of each object.

Next, ng-repeat is used to list all of the titles of the items in the view:

<!-- (views/partials/data-list.html) -->  
<li ng-repeat="data in dataList">  
    <div class="row">
        <div class="small-10 columns">
            - {{data.title}} <!-- title of the item -->
        <div class="small-2 columns">
            <input id="{{$index}}" type="button"
                class="right dataListRemove"
                ng-click="dataListRemove(, $index)"

You'll notice that a remove button is attached to each of the items, as well. The remove button stores the id of the data object and the index in the array so that it can be properly removed from both Syncano and the view later on.

Angular Modeling

You'll notice that as you type a new item into the input field, an Angular model is watching that field and immediately displaying the data. This isn't necessary for this app, but it can be used to create a better user experience.

For example, if you want to display how the data will look immediately while someone is typing or changing it, this is a perfect and simple solution! Below is the specific code that allows that:

<!-- (views/partials/data-list.html) -->  
<!-- Under 'List' section -->  
<li>{{dataListItem.title}}</li> <!-- updates in real time -->

<!-- Under 'Add Form' section -->  
<!-- important part here is 'ng-model="dataListItem.title' -->

<input id="dataListItem" class="input-group-field" type="text" placeholder="Item Name" ng-model="dataListItem.title">  

Data Sync

Before we get into how this app adds and removes items from the list, I want to mention how everything is staying in sync.

When an item is added or removed, the data is first sent from the UI to a JavaScript function, which sends it to Syncano using the ngSyncano library. It's important that the UI only displays changes that are true in relation to the database.

For example, if Syncano fails to store the data, or the user is disconnected from the internet, the view shouldn't tell the user that the data is added and available.

Once Syncano returns successfully, the data is sent back to the UI to be displayed. Now that you know the reasoning behind the process for adding and removing data, let's break it down.

Adding an Item

When you finally press "Enter" or click the "Add" button, a few things are happening in the background.

The form is using ng-submit to trigger the dataListAdd() function, which is a $scope function. This function is expecting the item you just entered as a parameter.

<!-- (views/partials/data-list.html) -->  
<form ng-submit="dataListAdd(dataListItem); dataListItem = initial">  
    <div class="input-group">
        <input id="dataListItem" class="input-group-field" type="text"
            placeholder="Item Name" ng-model="dataListItem.title">
        <div class="input-group-button">
            <input type="submit" class="button" value="Add">

It then passes a couple of checks, clears the input field (which clears the model), and sends the item data to the addItem() function:

// (js/app.js)
$scope.dataListAdd = function(item) {
    if ($scope.dataList.length < 10){ // to limit public posts
        var newItem = angular.copy(item); // copies the model
        $('#dataListItem').val(""); // clear the input

                if (res){ // if successful,
                    // add the new item from the API
                    // response to the list
                } else {
                    // error
    } else { // if too many items exist
        alert('There are too many items!
            Delete some first to add more.');

The addData() function then makes a Syncano API add call to add the item to your specified class:

// (js/app.js)
function addData(item) { // returns either false or the new object  
    return syncanoService.class('CLASS').dataobject().add(item)
        .then(function(res){ // if successful
            successAlert(); // flash UI alert
            return res; // return object
        .catch(function(err){ // if failed
            $scope.error = err;
            return false;

When this call is completed, it sends back the response data to the dataListAdd() function to be added to the list array as seen in the above code.

Then, Angular takes care of the rest! A $digest is triggered and the results are displayed.

Note: If the Syncano API call is unsuccessful, the view will not update and you should check your console for error messages.

Removing an Item

When you click the "Remove" button on the right side of each item, the process is similar to the item adding process described above.

Along with each title for each item, the item's Syncano id number is logged in the button itself. This is necessary for the Syncano API delete call, since you need to pass it as a parameter.

<!-- (views/partials/data-list.html) -->  
<input id="{{$index}}" type="button" class="right dataListRemove"  
    ng-click="dataListRemove(, $index)" value="X">

Each remove button has the ng-click method attached to it, which, when clicked, calls the dataListRemove() function. This function takes two parameters: the item id and the index in the array.

// (js/app.js)
$scope.dataListRemove = function(itemID, index) {
            if (res){ // if successful
                $scope.dataList.splice(index, 1); // remove from array
                $scope.$apply(); // refresh $scope
            } else {
                // error

This function sends the id from the item to the removeData() function, which then makes a Syncano API delete call.

// (js/app.js)
function removeData(itemID) {  
    return syncanoService.class('CLASS').dataobject(itemID).delete()
        .then(function(res){ // if deleted successfully
            return true;
            return false;

If this call is successful, the item is then removed from the array and the $scope refreshes.

Note: If the Syncano API call is unsuccessful, the view will not update and you should check your console for error messages.

Try It Yourself!

That's it! The app is as simple as those few functions. With this as a start, you can make some really powerful applications based on simple functionality! All built in the wonderful framework of AngularJS.

Try building some applications yourself! You can fork the GitHub repo here (the /dist/ directory), or take the code snippets from here and use them.

The next part of the series will be User Authentication. Stay tuned for more ngSyncano mini-apps!

More Info

For more information on Syncano and specific API calls, visit the docs.
You can also ask me questions on Twitter! @DevinViss

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.