JSFiddle - React, Tailwind, and code Playground

by MasterAlex

HTML

<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="OneController">
    <button ng-click="change()">change 1</button>
    {{changed}}; {{Service.stack().length || 'empty' }}
  </div>
  <div ng-controller="TwoController">
    <button ng-click="change()">change 2</button>
    {{changed}}; {{Service.stack().length || 'empty' }}
  </div>
</div>

JavaScript

(function() {
  angular
    .module('app', [])
    .run(function($rootScope) {

      // можно обмениваться событиями
      $rootScope.$on('data', function(e, data) {
        $rootScope.$broadcast('changed', data);
      });
    })
    // все сервисы это Singletone
    .factory('Service', function() {
      var stack = [];
      return {
        update: function(msg) {
          stack.push(msg);
        },
        stack: function() {
          return stack;
        }
      };
    })
    .controller('OneController', ['$scope', 'Service',
      function($scope, Service) {

        $scope.Service = Service;
        $scope.changed = 'no';

        $scope.change = function() {
          $scope.$emit('data', 1);
          Service.update(2);
        };

        $scope.$on('changed', function(e, data) {
          $scope.changed = data;
        });
      }
    ])
    .controller('TwoController', ['$scope', 'Service',
      function($scope, Service) {

        $scope.Service = Service;
        $scope.changed = 'no';

        $scope.change = function() {
          $scope.$emit('data', 2);
          Service.update(2);
        };

        $scope.$on('changed', function(e, data) {
          $scope.changed = data;
        });



      }
    ]);

})();