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

Всем привет. Сегодня мы с вами разберем как шарить данные между двумя контроллерами. Вот тестовый пример, где у нас есть два контроллера: firstCtrl с моделью hello и secondCtrl с моделю hello. Выглядит это вот так

<div ng-controller='firstCtrl'>
  <input type='text' ng-model='hello'>
</div>

<div ng-controller='secondCtrl'>
  <input type='text' ng-model='hello'>
</div>

Как мы видим, они никак не связаны и это два абсолютно разных скоупа, в которых описаны переменные hello. И мы хотим как-то сделать так, чтобы данные обновлялись одновременно в обоих контроллерах. Очень часто, когда вы делаете какое-то приложение, у вас возникает проблема, когда данные одни и те же и нужно, чтобы они были одинаковые в обоих контроллерах, например.

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

То есть если вам нужно сделать какую-то сущность, которая будет хранить данные, которые вы сможете использовать в нескольких контроллерах одновременно, то вам нужна фабрика.

Так же, как мы описывали контроллер, описываем factory.

app.factory('myFactory', function () {
});

Фабрика обязательно должна что-то возвращать. В данном случае будем возвращать обьект, у которого будет одно проперти hello и оно будет равняться hello world.

app.factory('myFactory', function () {
    return {
        hello: 'hello world'
    }
});

Еще раз. Мы описываем фабрику, это функция, которая возвращает обьект. У нее есть проперти hello, которое равняется hello world. Дальше мы можем эту фабрику использовать в любом контроллере.

Для того, чтобы ее использовать, ее нужно сначала подмешать. Здесь же, где мы подмешали $scope - мы передаем myFactory и теперь эта фабрика будет доступна внутри контроллера.

app.controller('firstCtrl', function($scope, myFactory) {
  console.log('firstCtrl');
  $scope.hello = 'hello world';
});

Теперь давайте напишем в контроллере $scope.myFactory = myFactory;

app.controller('firstCtrl', function($scope, myFactory) {
  console.log('firstCtrl');
  $scope.myFactory = myFactory;
  $scope.hello = 'hello world';
});

Зачем мы это делаем? Сейчас myFactory недоступна внутри шаблона. Она доступна только в контроллере. Если мы хотим, чтобы переменная была доступна внутри шаблона, то мы должны ее занести в $scope. Тоже самое сделаем во втором контроллере.

app.controller('secondCtrl', function($scope, myFactory) {
  console.log('secondCtrl');
  $scope.myFactory = myFactory;
  $scope.hello = 'hello world';
});

Что это нам дает? Теперь, например, в нашем шаблоне мы можем заменить ng-model="hello" на ng-model="myFactory.hello" так как мы знаем, что myFactory нам уже достуна в шаблоне. И тоже самое во втором случае.

<div ng-controller='firstCtrl'>
  <input type='text' ng-model='myFactory.hello'>
</div>

<div ng-controller='secondCtrl'>
  <input type='text' ng-model='myFactory.hello'>
</div>

Как мы видим и первая и вторая модель, ссылаются на одну и ту же фабрику и на одни и те же данные. Давайте посмотрим в браузер.

Как мы видим, теперь данные обновляются одновременно. Это именно то, чего мы добивались. Теперь если мы хотим шарить между двумя контроллерами какие-то данные, мы можем просто добавлять их в myFactory и использовать их как в первом, так и во втором контроллере.

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