RainyJs — как Angular, только для Ajax

class FooService {
    /*@ngInject*/
    constructor($http) {
        this.$http = $http;
    }
    
    function getItems() {
        return this.$http.get('/items').then(response => {
            let items = response.data;
            // тут могут быть какие-то действия с полученными данными
            return items;
        });
    }

    function createItem(item) {
        return this.$http.post('/items', item);
    }

    function updateItem(item) {
        return this.$http.put('/items/' + item.id);
    }

    function deleteItem(item) {
        return this.$http.delete('/items/' + item.id);
    }
}

class FooController {
    /*@ngInject*/
    constructor($foo) {
        this.$foo = $foo;
        this.items = [];
        this.isLoading = false;
        this.error = false;

        this.fetchData();
    }

    fetchData() {
        this.isLoading = true;
        return this.$foo.getItems()
            .then(items => {
                this.items = items;
                this.error = false;
            })
            .catch(() => {
                this.error = true;
            })
            .finally(() => {
                this.isLoading = false;
            });
    }

    addItem() {
        this.items.push({amount: 1, cost: 100});
    }

    createItem(item) {
        this.isLoading = true;
        return this.$foo.createItem(item).then(() => {
            return this.fetchData();
        });
    }

    updateItem(item) {
        this.isLoading = true;
        return this.$foo.updateItem(item).then(() => {
            return this.fetchData();
        });
    }

    deleteItem(item) {
        this.isLoading = true;
        return this.$foo.deleteItem(item).then(() => {
            return this.fetchData();
        });
    }
}

angular.module('app', [])
    .service('$foo', FooService)
    .controller('FooController', FooController);

<div ng-controller="FooController as vm">
    <table ng-hide="vm.isLoading">
        <thead>
            <tr>
                <th>ID</th>
                <th>Amount</th>
                <th>Cost</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in vm.items track by item.id">
                <td><strong>{{ item.id }}</strong></td>
                <td><input type="text" ng-model="item.amount"></td>
                <td><input type="text" ng-model="item.cost"></td>
                <td><a href ng-click="vm.deleteItem(item)">delete</a></td>
                <td><a href ng-click="vm.updateItem(item)">update</a></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan=5><a href ng-click="vm.addItem()">Add</a></td>
            </tr>
        </tfoot>
    </table>
    <div ng-show="vm.isLoading">
        <img src="loading.gif" alt="">
    </div>
</div>