/loading_data_to_controller_without_promise_example

Render loaded data from Factory to Controller without Promises

Primary LanguageJavaScript

Цель примера

Найти способ хранения данных в фабрике и синхронизация их со вьюхой. Причем без Promise.

Опробовать

Для запуска потребуется NodeJs. Простите этот оверскилл. Выполните следующее:

git clone git@github.com:justVitalius/loading_data_to_controller_without_promise.git
cd loading_data_to_controller_without_promise
npm install 
npm run server

После чего по адресу localhost:8080 будет запущено тестовое приложение

Изыскание и проблема

Если выносить логику работы в фабрику, то фабрика начинает работать с API, т.е.запрашивать json через $http или $resource и обрабатывать его. Обработанные данные нужно показывать во вьюхе.

Всюду описан лишь один способ через Promise, что-то типа

// Factory
function getAll(){
  return $http
            .get(url)
            .then(function(response){
              return response.data;
            });
}


// Controller
factory.getAll().then(function(data){
  $scope.data = data;
});

Но этот способ приводил к проблемам:

  • нужно дважды объявлять $scope.data: вначале с дефолтным значением и потом внутри Promise;
  • данный стиль конфликтует со стилем биндинга контроллер-вьюха, нужно, чтобы без then();
  • не вяжется со стилем Flux, где стараются избежать then() и перейти на событийную модель перезаписи данных.

Решение

Решение оказалось простым. Но поиски были очень долгими.

Вначале была идея использовать $cacheFactory, но через ее кэширование можно лишь в контроллере обновлять лишь объекты, например «один автор», но не коллекции «100500 авторов в массиве».

Спасибо (автору этой статьи)[http://www.justinobney.com/keeping-angular-service-list-data-in-sync-among-multiple-controllers/]. Он натолкнул на angular.copy(), который творит магию.

Вся реализация внутри кода.