Angular: News Ex

by Roman

HTML

<tr ng:repeat="item in items">
        <td>{{ item.news_id }}</td>
        <td>{{ item.news_preview|truncate:20 }}</td>

        <td>
            <i class="square small inverted edit icon" ng:click="editAction(item)"></i>
            <i class="square small inverted remove icon" ng:click="deleteAction(item)"></i>
        </td>
</tr>

CSS

</style>
<!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.1.2/css/foundation.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<style>

JavaScript

angular.module('backendApp.services')
    .service('NewsModel', function ($resource, PATH_API) {

        return $resource(PATH_API + 'news/:param1/:param2', {}, {
            index  : { method: 'GET', isArray: true },
            create : { method: 'GET', params: {param1: 'create'} },
            store  : { method: 'POST' },
            show   : { method: 'GET', params: {param1: '@id'} },
            edit   : { method: 'GET', params: {param1: '@id', params: 'edit'} },
            update : { method: 'PUT', params: {param1: '@id'} },
            destroy: { method: 'DELETE', params: {param1: '@id'} }
        });

    });

angular.module('backendApp.controllers')
    .controller('NewsListController', function ($rootScope, $scope, $routeSegment, $location, PATH_API, NewsModel, $notification) {

        $scope.items = NewsModel.index();

        $scope.deleteAction = function (item) {
            var selfItem = item,
                lastData = null;

            NewsModel.destroy({param1: selfItem.news_id}, function () {

                // "Мягко" удаляем запись. Без ресета данных модели.
                $scope.items.splice($scope.items.indexOf(selfItem), 1);

                // Получаем с сервера актуальное состояние и сравниваем.
                // Синхронизируем, если есть различия.
                lastData = NewsModel.index(function () {
                    if (!angular.equals($scope.items, lastData)) {
                        // Запускаем нотификацию
                        $notification.info('Синхронизация данных');
                        // Обновляем модель (hard reset model).
                        $scope.items = lastData;
                    }
                });
            });
        };
    });