How to add Backand to Ionic Creator

ioniccreator.md

In order to enable Backand in Ionic Creator follow these steps:

Add Config File

Under 'Other JS' add new file name bkndconfig.js, with this code (override the entrire code in the page):

angular.module('app.config', [])
// remember to add "app.config" to your angular modules in Code Settings

.config(function(BackandProvider) {
  
    BackandProvider.setAppName('bkndionicstarter');
    BackandProvider.setSignUpToken('9388223f-11d9-485f-b8be-fcace1ee362f');
    BackandProvider.setAnonymousToken('8379a2c8-15e5-4acf-a17f-29721b2a44c3');
  
})

Update your app name and tokens

Code Settings

• In 'Code Settings', under 'External JS' tab add these two Script URL:

https://cdn.backand.net/vanilla-sdk/1.1.0/backand.js
https://cdn.backand.net/angular1-sdk/1.9.6/backand.provider.js

So it will look like this:

<script src="https://cdn.backand.net/vanilla-sdk/1.1.0/backand.js"></script>
<script src="https://cdn.backand.net/angular1-sdk/1.9.6/backand.provider.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<script src="js/bkndconfig.js"></script>

• Under 'Angular Modules' add 'backand' and 'app.config', should look like this:

angular.module('app', [
'ionic',
'app.controllers',
'ionicUIRouter',
'backand',
'app.config',
'app.services',
'app.directives'
])

services.js

In services you can start using backand provider, for example get rows from 'items' object:

.service('ItemsModel', function(Backand){
    
    var service = this;
    var objectName = 'items';
    
    service.all = function () {
        return Backand.object.getList(objectName);
    };
    
});

Pages

• In the page controller, add this code to call ItemsModel and get the data rows:

$scope.getAll = function() {
    ItemsModel.all()
        .then(function (result) {
            console.log(result.data);
            $scope.data = result.data;
        });
}

$scope.getAll();

• In the page desgin, use the following in order to show all the items:
  • Drag 'List Item'
  • On the left side click on 'list'
  • On the right side click on 'Angular Directives' and add new directive: directive: ng-repeat value: object in data
  • Click on the 'list-item' and change the content to {{object.name}}

More...

Using Backand SDK you can add more services to make CRUD, real-time, call server side code and more.