Как правильно управлять данными в angular 1.x?

Question

[Никита Петров]

Всем привет!
Меня мучает такой вопрос: Как правильно управлять данными в angularJS 1.x ?
Прием ,который я использую сейчас:

angular.module('app')
  .service( 'UserService', UserService )
  .controller('UserController', UserController);

function UserService() {
  this.user = {
    settings: {
      name: 'nikler'
    }
  }
}

function UserController(UserService) {
  this.user = UserService.user;
}

Меняем например user.settings.name в сервисе ,изменения отобразятся в контроллере и наоборот.
Видел где-то так же реализации с геттерами и сеттерами у сервиса. Но тогда непонятно ,как наладить механизм синхронизации ,чтобы изменения ,произошедшие в одной сущности тут же отобразились на другой.
Подскажите пожалуйста ,какие есть способы организации управления данными в angular 1.x ?
Так же где-то видел упоминание про связку angular + redux. Кто ее использовал ,подскажите ,насколько это удобно ,не увеличивает ли это сложность? (с redux плохо знаком).
Возможно плохо гуглил ,но гугл не очень помог. Заранее спасибо за помощь.

Answer 1

[Роман]

Хорошо, когда зоны ответственности распределены:
Контроллер отвечает за отображение данных и пользовательский ввод.
А сервис отвечает за обновление и хранение данных.

В таком подходе очень лего реализовать такие паттерны, как отмена изменений пользователя и возврат к предыдущей версии. Так как она всегда хранится в сервисе.
Или например, предупреждать пользователя, что есть несохраненные данные - перед уходом с формы, так как можно сравнить модель из контроллера с версией модели в сервисе.

По хорошему - должна быть одна точка изменений данных -> Сервис, а контроллер должен работать с их копией

Comments

[Никита Петров]

Спасибо. А каким образом передавать модель из сервиса в контроллер? Если учитывать возможность сравнить модель из контроллера с моделью сервиса ,выходит мой способ ,который я указал выше ,совсем не подходит ,ведь там объект передается по ссылке.

[Никита Петров]

Немного уточню вопрос: Если мы работаем с копией ,как тогда синхронизировать данные? Допустим ,что данные могут поменяться не только пользователем ,но например из сервиса таймаутом.

[Роман]

По ссылке, не подходит. Вы верно понимаете, иначе все изменения будут происходить по ссылке в той моделе, что у вас в сервисе. Можно в сервисе сделать метод, например getModel(){ return angular.copy(service.model); } Он будет возвращать копию.

[Роман]

По поводу синхронизации. Если вы хотите обновить модель на основании данных контроллера, то можно сделать один большой метод сервиса, например setModel(newModel) - который будет обновлять полностью модель. Или несколько дескретных setModelColor(newColor) - который (-ые) будут обновлять какие-то определенные части вашей модели.

Если вы обновляете модель из самого сервиса (по таймауту или по событию) - то хорошим тоном будет использовать те же методы обноыления, что и для контроллера. ( setModel и/или setModelColor ).
Сообщить, контроллеру, о том что данные обновились можно тоже разными способами.
Наверное, правильно, будет бросить эвент о том, что ваша модель в сервисе обновилась и контроллер при наступлении этого события вызовет getModel() из вашего сервиса, чтобы получить актуальную модель

[Никита Петров]

Роман ,спасибо большое! Как раз в таком развернутом виде и хотел получить информацию. Помечу решением ваш ответ.

Answer 2

[Aleksei Podgaev]

Можно сделать по-разному. Главное с самого начала решить, кто будет вносить изменения в данные. Я бы рекомендовал, чтобы изменения вносились только в одном месте (например в указанном в примере контроллере). Если у вас данные будут менять все кому не лень - другие сервисы, директивы, другие вложенные контроллеры, то вы очень скоро потеряете контроль над тем, что происходит у вас в приложении и откуда растут ноги у изменений. Подход с единственным ответственным за изменение данных сильно облегчает жизнь в приложениях со сложной архитектурой, хотя и требует иногда лишнего прокидывания обработчиков событий вверх по иерархии компонентов.

Comments

[Никита Петров]

Ну вот у меня данные могут изменяться как из вьюхи ,так и из сервиса по таймауту запросом на сервер.
Сейчас решаю это следующим способом: данные хранятся в сервисе. В этом сервисе есть 2 метода: get и set. Когда данные изменяются через контроллер ,то вызывается сеттер ,который вносит данные в модель ,после чего в контроллере я обновляю данные геттером. Если данные меняются из сервиса ,вызывается этот же сеттер ,после чего через broadcast пуляется евент ,и ловится этим контроллером. Данные опять обновляются геттером ,ну и вызывается $apply ,чтобы вьюшку обновить. Насколько это плохо или хорошо?

[Aleksei Podgaev]

Никита Петров: Если таймаут вынести из сервиса в контроллер, тогда обновлять данные будет всегда только контроллер и он всегда будет знать, изменились данные или нет. И не придётся с ивентами заморачиваться.

[Никита Петров]

Aleksei Podgaev: а если модель использует несколько контроллеров?

[Aleksei Podgaev]

Никита Петров: Нужно, чтобы использовал только один - корневой, а остальные получали данные от него. Вот тут расписаны три варианта, в том числе и с корневым контроллером: https://johnpapa.net/sharing-data-in-an-angular-co...

[Никита Петров]

Aleksei Podgaev: Спасибо за годную статью)

Answer 3

[emp1re]

Меняеться обьект потому что он один и тот же. Контролер или сервис тут не причем.

Comments

[Никита Петров]

Это понятно ,что он один и тот же. Тут вопрос в том ,какие еще есть способы управления данными? Я привел пример выше в качестве того ,какой способ использую я. Интересны другие варианты.

[emp1re]

Если именно управления данными то через изменения модели. Если вы про передачу данных, то через сервисы, ивенты, скопы и биндинги