Angular.js Директива следящая за результатами запросов к API сервера

Question

[Aliansys]

В Angular'е я еще зелен, поэтому часто возникают вопросы как делать правильно те или иные вещи.

Я хочу реализовать следующий функционал:
Например, у нас есть Админка. Я хочу чтобы в ее layout'e была директива, которая будет отображать результат запроса к API сервера в виде какого-нибудь текста (например, 'success' или 'try later'). То есть пользователь что-то там правит, нажимает "Сохранить" и ему отображалось: "Ок" или "не ок" - после ответа от сервера.
Соответственно разных контроллеров и вьюх полно и как между всеми ими все это передавать мне не очень понятно. Само общение с сервером происходит через сервисы.
Следить за какой-то глобальной переменной, которую изменять в ответах на запросы? - как-то не очень вариант, по-моему.
Видел в гугле вариант с сервисом. То есть директива следит за сервисом, а сервис у себя помечает success или error исходя из ответа сервера. Но у меня не один сервис. Тогда получается, что в директиву надо будет все сервисы подключать и смотреть за результатами всех выполнений. Как-то сложно получается. И каждый раз написав новый сервис надо будет не забыть подключить его и в директиву.
Думается мне, что можно как-то сделать хорошо и правильно, просто я еще не знаю как. Собственно в этом и вопрос - как делать правильнее всего?

Answer 1

[Сергей Протько]

.controller('MyCtrl', function ($scope, myDataProvider, flashBag) {
    myDataProvider.getData()
        .then(function () {
              flashBag.success('All done!');
        }, function () {
              flashBag.error('Something went wrong...');
        });
})

как-то так.

Реализаций подобного хватает

Comments

[maxaon]

И все же это надо будет писать при каждом получении данных.

[Сергей Протько]

@maxaon, да, и это нормально. Можете в сервисе это делать. Можете промис объект передавать, например так:

.config(function(flashBagProvider) {
    flashBagProvider
           .onSuccess('mydata', 'Some message')
           .onFailure('mydata', 'Some another message');
})
.controller('MyCtrl', function ($scope, myDataProvider, flashBag) {
        
        var dataPromise = myDataProvider.getData().then(function(data){ 
        // ...
        });
   
        flashBag.notify('mydata', dataPromise);
})

посмотрите на имеющиеся реализации. Только имейте в виду, это нормально писать каждый раз такие вещи. Можно чуть упростить за счет передачи промисов и конфигурации, но это так же нужно хорошенько обдумать.

[Aliansys]

Спасибо. Вы дали мне хлеб для размышлений и место куда можно посмотреть. Такая реализация меня вполне устраивает.

Answer 2

[maxaon]

Для этого вам понадобятся три вещи.
1. Промежуточный сервис, который будет хранить ваши данные (состояние запроса, количество запросов и др)
2. Директива, которая будет отображать состояние сервиса.
3. Фабрика(или провайдер) который будет создавать кастомные обертки для апии и соответственно менять состояние промежуточного сервиса. Вариантоа вариантов много.
a. Использовать Restangular и установить RequestInterceptor и ResponseInterceptor
Изменять состояние сервиса в них. Даже не надо будет писать свою фабрику.
b. Декорировать ngresource (или использовать внутри фабрики).
с. Написать все с нуля. (Или скопировать ngResource, что есть плохо).

Comments

[Aliansys]

Спасибо, я подумаю над этим и почитаю про интерсепторы внимательней. Но Ваш вариант говорит о связи "Директива <-> Сервис". Я об это написал в вопросе. У меня есть несколько сервисов и мне хотелось бы, чтобы директива отражала результаты всех сервисов и, если у меня появится новый сервис, не надо было менять код директивы и ничего в нее добавлять.

[maxaon]

Вы не совсем поняли идею.
Директива -> Сервис-состояния <- Фабрика мапингов <- REST сервисы 1...N
Фабрика мапингов создает API для запросов, и, например через интерсеторы, меняет сервис-состояния. Вам не надо каждый раз регистроировать что-либо, а тем более менять директиву.

[Aliansys]

А! Теперь я понял, что Вы имеете ввиду. Тоже интересное решение. Спасибо!