ui grid example 2

ui grid with backand

by Avi Algaly

HTML

<div ng-app="uigrid">
    <div ng-controller="MainCtrl">
        <div ui-grid="gridOptions" class="grid"></div>
    </div>
</div>
<p><a target="_blank" href="http://blog.backand.com/ng-grid-and-a-simple-rest-api/">Back to the article</a></p>
<p><a target="_blank" href="https://www.backand.com/apps/#/sign_up">Create your own backend</a></p>

CSS

</style> <!-- remove this, it is just for jsfiddle --> 
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script> 
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script> 
<style>
.grid {
  width: 500px;
  height: 250px;
}

JavaScript

var app = angular.module('uigrid', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['ProductsService', '$scope', function (ProductsService, $scope) {
    $scope.gridOptions = {
        excludeProperties: '__metadata',
    };

    $scope.load = function () {
        ProductsService.readAll().then(function (response) {
            $scope.gridOptions.data = response.data;
        });
    }

    $scope.load();
}]);


(function () {

    angular.module('uigrid')
        .service('ProductsService', ['$http', ProductsService]);

    function ProductsService($http) {

        var self = this;
        var baseUrl = 'https://api.backand.com/1/objects/';
        var anonymousToken = {
            'AnonymousToken': '78020290-5df3-44b8-9bdb-7b3b4fea2f25'
        };

        var objectName = 'products';

        self.readAll = function () {
            return $http({
                method: 'GET',
                url: baseUrl + objectName,
                headers: anonymousToken
            }).then(function (response) {
                return response.data;
            });
        };

        self.readOne = function (id) {
            return $http({
                method: 'GET',
                url: baseUrl + objectName + '/' + id,
                headers: anonymousToken
            }).then(function (response) {
                return response.data;
            });
        };

        self.create = function (data) {
            return $http({
                method: 'POST',
                url: baseUrl + objectName,
                data: data,
                params: {
                    returnObject: true
                },
                headers: anonymousToken
            }).then(function (response) {
                return response.data;
            });
        };

        self.update = function (id, data) {
            return $http({
                method: 'PUT',
                url: baseUrl + objectName + '/' + id,
                data: data,
               ...