Обмен данными между контроллерами в AngularJS: фабрика

Быстрый ответ

Чтобы обмениваться данными между контроллерами в AngularJS, пользуйтесь сервисами. Они являются синглтонами и предназначены для поддержки одного и того же источника данных. Создайте сервис, который будет хранить информацию, и инжектируйте его в нужные части вашего приложения.

// Сервис для хранения и управления общими данными
app.service('SharedData', function() {
  var data = {};
  return {
    get: function() { return data; },
    set: function(newData) { data = newData; }
  };
});

// Пример использования SharedData в контроллере A
app.controller('CtrlA', function($scope, SharedData) {
  SharedData.set({ shared: 'info' });
});

// Пример использования SharedData в контроллере B
app.controller('CtrlB', function($scope, SharedData) {
  $scope.info = SharedData.get();
});

Теперь контроллеры CtrlA и CtrlB имеют синхронизированное состояние благодаря общеиспользуемому сервису SharedData.

Дополнительные методы обмена в AngularJS

Помимо сервисов, в AngularJS существуют и другие паттерны для передачи данных между контроллерами, такие как наблюдение за переменными через $watch, использование параметров маршрутизации $stateParams и взаимодействие с помощью событий $broadcast и $emit.

Связывание данных через ng-model

ng-model позволяет связывать переменные с $scope и обеспечивает их автоматическое обновление в представлении.

app.controller('CtrlA', function($scope, SharedData) {
  $scope.sharedData = SharedData.get();
  $scope.updateData = function(newInfo) {
    $scope.sharedData.info = newInfo;
    SharedData.set($scope.sharedData);
  };
});

Пример использования в HTML:

<input type="text" ng-model="sharedData.info" ng-change="updateData(sharedData.info)">

Подробнее об этом расскажет наш спикер на видео

Отслеживание изменений через $watch

$watch может служить средством наблюдения за изменениями данных внутри $scope в более сложных приложениях.

app.controller('CtrlA', function($scope, SharedData) {
  $scope.$watch(function() {
    return SharedData.get();
  }, function(newValue, oldValue) {
    if (newValue !== oldValue) {
      $scope.info = newValue;
    }
  }, true);
});

Параметры маршрутизации $stateParams для передачи данных

Хорошим способом передать данные между маршрутами является использование параметров URL с помощью $stateParams.

app.controller('CtrlA', function($scope, $stateParams, SharedData) {
  SharedData.set({ shared: $stateParams.info });
});

Методы $broadcast и $emit для взаимосвязи

AngularJS предоставляет механизмы взаимодействия через события, используя методы $broadcast и $emit.

// Родительский контроллер отправляет сигнал о обновлении данных
$scope.$emit('dataUpdated', newData);

// Дочерний контроллер слушает сигналы
$scope.$on('dataUpdated', function(event, data) {
  $scope.info = data;
});

Визуализация

Два повара на двух разных кухнях готовят пиццу и используют общий склад ингредиентов.

Повар 1 (👩‍🍳): Мне нужны помидоры, сыр и базилик.
Повар 2 (👨‍🍳): Мне тоже нужны помидоры, сыр и базилик.

Этот общий склад аналогичен сервису, посредством которого повара обмениваются общими ингредиентами.

👩‍🍳 ↔️ 🍱 ↔️ 👨‍🍳

Продвинутые приемы обмена данными в AngularJS

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

Управление жизненным циклом данных

Важно корректно удалять данные при уничтожении контроллера и сохранять при переходе к дочерним маршрутам.

app.controller('CtrlA', function($scope, SharedData, $rootScope) {
  var cleanUp = $rootScope.$on('$destroy', function() {
    SharedData.set({});
  });

  $scope.$on('$destroy', cleanUp);
});

Поддержка кода

Код легче поддерживать, когда он структурирован и не злоупотребляет использованием $rootScope.

Полезные материалы

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