Controller Communication in AngularJS

Key Concepts

Controller Communication in AngularJS involves different methods to share data and functionality between controllers. The key concepts include:

• Using Services
• Using Events
• Using Parent-Child Controllers
• Using Shared Scope

1. Using Services

Services in AngularJS are singletons that can be used to share data and functionality across different controllers. By injecting a service into multiple controllers, you can ensure that they all have access to the same data and methods.

Example:

        // Define a service
        app.service('DataService', function() {
            var data = { message: 'Hello, AngularJS!' };
            return {
                getData: function() {
                    return data;
                },
                setData: function(newData) {
                    data = newData;
                }
            };
        });

        // Inject the service into controllers
        app.controller('Controller1', function($scope, DataService) {
            $scope.data = DataService.getData();
        });

        app.controller('Controller2', function($scope, DataService) {
            $scope.updateData = function() {
                DataService.setData({ message: 'Updated Message' });
            };
        });
    

In this example, both Controller1 and Controller2 can access and modify the data stored in DataService.

2. Using Events

AngularJS provides an event system that allows controllers to communicate by broadcasting and emitting events. Controllers can listen for these events and respond accordingly.

Example:

        app.controller('Controller1', function($scope) {
            $scope.$on('customEvent', function(event, args) {
                $scope.message = args.message;
            });
        });

        app.controller('Controller2', function($scope) {
            $scope.sendMessage = function() {
                $scope.$emit('customEvent', { message: 'Event Triggered' });
            };
        });
    

In this example, Controller2 emits a custom event, and Controller1 listens for it to update its message.

3. Using Parent-Child Controllers

Controllers in AngularJS can be nested, creating a parent-child relationship. The child controller can access the scope of the parent controller, allowing for communication between them.

Example:

        <div ng-controller="ParentController">
            <p>{{ parentMessage }}</p>
            <div ng-controller="ChildController">
                <p>{{ childMessage }}</p>
                <button ng-click="updateParentMessage()">Update Parent</button>
            </div>
        </div>

        app.controller('ParentController', function($scope) {
            $scope.parentMessage = 'Parent Message';
        });

        app.controller('ChildController', function($scope) {
            $scope.childMessage = 'Child Message';
            $scope.updateParentMessage = function() {
                $scope.parentMessage = 'Updated by Child';
            };
        });
    

In this example, the child controller can update the parent controller's message.

4. Using Shared Scope

When controllers are nested, they share the same scope. This allows for direct communication between the controllers by modifying shared properties on the scope.

Example:

        <div ng-controller="SharedController">
            <p>{{ sharedMessage }}</p>
            <div ng-controller="NestedController">
                <p>{{ sharedMessage }}</p>
                <button ng-click="updateSharedMessage()">Update Shared</button>
            </div>
        </div>

        app.controller('SharedController', function($scope) {
            $scope.sharedMessage = 'Shared Message';
        });

        app.controller('NestedController', function($scope) {
            $scope.updateSharedMessage = function() {
                $scope.sharedMessage = 'Updated Shared Message';
            };
        });
    

In this example, both controllers share the same scope, allowing them to communicate by updating the shared message.