How to share data between controllers using $rootScope?

In AngularJS, $rootScope is a global object that allows sharing data and events across different controllers. Since all controllers inherit from $rootScope, it can be used for data sharing and event communication.

---

1. Using $rootScope for Direct Data Sharing

One way to share data between controllers is by assigning a property to $rootScope. This makes the data available globally.

Example: Using $rootScope for Global Data

var app = angular.module('myApp', []);

app.run(function($rootScope) {
  $rootScope.sharedData = "Hello from $rootScope!";
});

app.controller('FirstController', function($scope, $rootScope) {
  $scope.updateData = function() {
    $rootScope.sharedData = "Updated by FirstController!";
  };
});

app.controller('SecondController', function($scope, $rootScope) {
  $scope.getData = function() {
    return $rootScope.sharedData;
  };
});

How it works:

• sharedData is defined in $rootScope (globally).
• FirstController updates the data.
• SecondController can access the updated data.

Drawback:
Using $rootScope directly is not recommended for large applications as it can cause unexpected modifications.

---

2. Using $rootScope.$broadcast() and $rootScope.$on() for Event-Based Communication

A better way to communicate between controllers is by using event broadcasting and listening.

Methods for Event Handling

Method	Description
$rootScope.$broadcast(eventName, data)	Broadcasts an event downward to all child controllers.
$rootScope.$emit(eventName, data)	Sends an event upward to parent controllers.
$scope.$on(eventName, callback)	Listens for an event.

Example: Communicating Between Controllers Using $broadcast()

var app = angular.module('myApp', []);

app.controller('SenderController', function($scope, $rootScope) {
  $scope.sendMessage = function() {
    $rootScope.$broadcast('customEvent', 'Message from SenderController!');
  };
});

app.controller('ReceiverController', function($scope) {
  $scope.$on('customEvent', function(event, data) {
    $scope.receivedMessage = data;
  });
});

How it works:

• SenderController broadcasts an event with $rootScope.$broadcast().
• ReceiverController listens using $scope.$on() and updates receivedMessage.

---

3. Using $rootScope.$emit() for Parent-to-Child Communication

If you need to send data to parent controllers, use $emit().

Example: Communicating Upwards Using $emit()

var app = angular.module('myApp', []);

app.controller('ChildController', function($scope) {
  $scope.notifyParent = function() {
    $scope.$emit('parentEvent', 'Data from ChildController!');
  };
});

app.controller('ParentController', function($scope) {
  $scope.$on('parentEvent', function(event, data) {
    $scope.parentMessage = data;
  });
});

How it works:

• ChildController sends an event using $emit().
• ParentController listens for the event using $on().

---

4. Best Approach: Using an AngularJS Service for Data Sharing

Instead of $rootScope, it’s better to use services for data sharing. This approach is more modular and scalable.

Example: Sharing Data Using a Service

var app = angular.module('myApp', []);

app.service('SharedService', function() {
  var sharedMessage = "Initial message";

  return {
    getMessage: function() {
      return sharedMessage;
    },
    setMessage: function(value) {
      sharedMessage = value;
    }
  };
});

app.controller('ControllerA', function($scope, SharedService) {
  $scope.updateMessage = function() {
    SharedService.setMessage("Updated by ControllerA!");
  };
});

app.controller('ControllerB', function($scope, SharedService) {
  $scope.getMessage = function() {
    return SharedService.getMessage();
  };
});

Why use a service?

• Services persist data even when controllers are destroyed.
• It prevents unnecessary event handling.
• It follows best practices for maintainability.