Передача данных из java-сервиса в AngularJS (ng-table)

217
30 марта 2017, 21:27

Здравствуйте! У меня возникла следующая проблема. Есть вполне рабочее веб-приложение на Java (Spring MVC), где, помимо прочего, делаются запросы в БД, а результаты выводятся в таблицу. До недавнего времени вывод производился в обычную таблицу на странице, генерирующейся на основе JSP-шаблона, но теперь в силу разных причин понадобилось экстренно прикрутить к приложению AngularJS - а именно директиву ng-table (нужен постраничный вывод данных). Поскольку с ангуляром работаю впервые, приходится усердно читать и выискивать, но пока что безрезультатно. Проблема, как мне кажется, в том, что я неверно дёргаю java-сервис. Понимаю, что вопрос глупый, но "стандартными средствами" (гугл) пока найти ответ не удаётся. Можете ли подсказать, как правильно следует обращаться к сервису в контроллере AngularJS? Буду благодарен за любую помощь.

Вот моя попытка описать ангуляровские модуль и контроллер. Как я понял, в данном случае я должен совершить три действия: задать параметры ng-table, дёрнуть сервис get-запросом и поместить результат его выполнения в $scope (в данном случае - в $scope.news).

var app = angular.module('main', ['ngTable']);
app.controller('MyCtrl', function($scope, $resource, $http, ngTableParams) {
    var data = [];
    $scope.tableParams = new ngTableParams({
        page: 1,
        count: 10
    }, {
        total: data.length, 
        getData: function($defer, params) {
                $http({method:'GET', url:'/'}).then(function successCallback(response)
            {
                data = response.data;
            });
            $scope.news = data.slice((params.page() - 1) * params.count(), params.page() * params.count());
            $defer.resolve($scope.news);
        }
    });
});

Сервис, к которому пытаюсь обратиться (ничего особенного, просто выборка всех данных из базы):

@RequestMapping("/")
public String list (Model model) {
    log.info("Listing news...");
    List<News> news = newsService.findAll();
    model.addAttribute("news", news);
    log.info(news.size() + " news have founded");
    return "news/list";
}

Заполнить таблицу пытаюсь вот так:

<div id="demo" ng-controller="MyCtrl">
    <table ng-table="tableParams" class="table">
        <tr ng-repeat="itm in news">
            <td data-title="'Date'">
                {{itm.date}}
            </td>
            <td data-title="'Text'">
                <div>{{itm.head}}</div>
                <div>{{itm.body}}</div>
            </td>
        </tr>
    </table>
</div>
READ ALSO
Валидация в сафари

Валидация в сафари

Функция валидации полей ввода

317
Как авторизироваться на github c помощью node js?

Как авторизироваться на github c помощью node js?

Делаю скачку обновлений с github из своего репозитория(есть доступ) при помощи nodejs

288
Переключение анимации в горизонтальном меню

Переключение анимации в горизонтальном меню

Всем привет! Подскажите пожалуйста как можно реализовать подобное переключение меню, когда блок появляется только когда пункт меню активный?...

208
Отображение XML с помощью AJAX и Javascript

Отображение XML с помощью AJAX и Javascript

Есть XML-файл, как правильно сделать его отображение с помощью AJAX и Javascript? Если я правильно понял суть, то на выходе должен будет получиться...

335