Executing a function in a different AngularJS controller: a comprehensive guide

Question

Executing a function in a different AngularJS controller: a comprehensive guide

I've been scouring the internet for information on setting up two controllers in my AngularJS module, but all the answers I find seem to be outdated. I want to have one controller handling $http GET requests and another displaying success or error messages. Is it best to call a method from the second controller with the message to be displayed, or should I use a service or factory for this? Services sound promising, but I'm struggling to implement them in this context.

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

module.controller('ApiController', ['$scope', '$http', function ($scope, $http) {
    $http.get('/api').
        success(function(data){
            // call AlertController('success')
        }).
        error(function(data){
            // call AlertController('failed')
        });
}]);

module.controller('AlertController', ['$scope', function ($scope) {
    $scope.message = {
        show_message: true,
        type: 'info',
        message: "Display message!"
    };
}]);

Alternatively, I might want to push incoming alerts onto a global object variable and remove them after display. Can anyone provide guidance on the best approach for this setup?

javascript angularjs angularjs-scope angular-services

Answer 1

Answer №1

Alright, let's give this a shot - don't forget to take a look at Injecting $scope into an angular service function()

The Notification service:

module.service('NotificationService', function ($timeout) {
    var notificationQueue = [];
    var DISPLAY_DURATION = 5000; // each notification will be displayed for 5 seconds

    function startTimer() {
        $timeout(function() {
                // Remove the first notification in the queue
                notificationQueue.shift();
                // Start timer for next notification (if there is one)
                if (notificationQueue.length > 0) startTimer();
            }, DISPLAY_DURATION);
    }

    function add(notification) {
        notificationQueue.push(notification);
        // If this is the only notification in the queue you need to start the timer
        if (notificationQueue.length==0) startTimer();
    }

    function get() {
        if (notificationQueue.length==0) return "";
        else return notificationQueue[0];
    }

    return { add: add, get: get };
});

You can also make use of this Network service:

module.service('NetworkService', ['$http', function ($http) {
    return {
        fetch: function(url) {
            return $http.get(url);
        }
    };
}]);

Your Search handler:

module.controller('SearchHandler', ['$scope', 'NetworkService', 'NotificationService', function ($scope, network, notifications) {
    network.fetch('/yelp').
    success(function(data){
        notifications.add('success');
    }).
    error(function(data){
        notifications.add('failed');
    });
}]);

Your Popup controller:

module.controller('PopupController', ['$scope', 'NotificationService', function ($scope, notifications) {
    $scope.getNotification = function() { notifications.get(); }
}]);

So in your HTML you can include:

<div ng-controller="PopupController">
    <div>{{ getNotification() }}</div>
</div>

Answer 2

Alright, let's give this a shot - don't forget to take a look at Injecting $scope into an angular service function()

The Notification service:

module.service('NotificationService', function ($timeout) {
    var notificationQueue = [];
    var DISPLAY_DURATION = 5000; // each notification will be displayed for 5 seconds

    function startTimer() {
        $timeout(function() {
                // Remove the first notification in the queue
                notificationQueue.shift();
                // Start timer for next notification (if there is one)
                if (notificationQueue.length > 0) startTimer();
            }, DISPLAY_DURATION);
    }

    function add(notification) {
        notificationQueue.push(notification);
        // If this is the only notification in the queue you need to start the timer
        if (notificationQueue.length==0) startTimer();
    }

    function get() {
        if (notificationQueue.length==0) return "";
        else return notificationQueue[0];
    }

    return { add: add, get: get };
});

You can also make use of this Network service:

module.service('NetworkService', ['$http', function ($http) {
    return {
        fetch: function(url) {
            return $http.get(url);
        }
    };
}]);

Your Search handler:

module.controller('SearchHandler', ['$scope', 'NetworkService', 'NotificationService', function ($scope, network, notifications) {
    network.fetch('/yelp').
    success(function(data){
        notifications.add('success');
    }).
    error(function(data){
        notifications.add('failed');
    });
}]);

Your Popup controller:

module.controller('PopupController', ['$scope', 'NotificationService', function ($scope, notifications) {
    $scope.getNotification = function() { notifications.get(); }
}]);

So in your HTML you can include:

<div ng-controller="PopupController">
    <div>{{ getNotification() }}</div>
</div>

Answer 3

Answer №2

To create a factory, follow these steps:

    module.factory('appFactory', ['$window', '$http', '$q', function(win, $http, $q) {
    return{
        backendCall: function(){
            var deferred = $q.defer();
            $http.get('/api').
                success(function(data){
                    deferred.resolve(data);
                }).
                error(function(data){
                    deferred.resolve(status);
                });

            return deferred.promise;
        }
    }
  }]);

Next, set up your controller like this:

module.controller('DataController', ['$scope', 'appFactory', function ($scope, appService) {
    appFactory.backendCall().then(function(response){
            $scope.data = {
            display_data: true,
            type: 'success',
            message: "Display data here!"
        };  
    })

}]);

Answer 4

To create a factory, follow these steps:

    module.factory('appFactory', ['$window', '$http', '$q', function(win, $http, $q) {
    return{
        backendCall: function(){
            var deferred = $q.defer();
            $http.get('/api').
                success(function(data){
                    deferred.resolve(data);
                }).
                error(function(data){
                    deferred.resolve(status);
                });

            return deferred.promise;
        }
    }
  }]);

Next, set up your controller like this:

module.controller('DataController', ['$scope', 'appFactory', function ($scope, appService) {
    appFactory.backendCall().then(function(response){
            $scope.data = {
            display_data: true,
            type: 'success',
            message: "Display data here!"
        };  
    })

}]);

Executing a function in a different AngularJS controller: a comprehensive guide

Answer №1

Answer №2

Similar questions

Inadequate completion of Object.create() method

Updating an element's HTML content from a template URL using AngularJS

Error: 'require' is undefined in react.production.min.js during production deployment

Converting JSON data into a table using jQuery, with certain columns hidden from view

Output the 'script' using the `document.write`

What is the best way to retrieve the transpiled string from babel-core?

When the promise is resolved, the members of the AngularJS controller are now

What is the quickest way to accomplish this task?

A single parallax transition designed exclusively for you

When scrolling, the header will automatically disappear until you reach the bottom. Once you start scrolling back up, the header

Eliminate the classes that were inserted through Jquery

Tips for triggering an error using promise.all in the absence of any returned data?

What could be the reason for AngularJS encoding the URLs for my POST parameters?

Arrays Filtering without Containing Elements

The field "addWorkout" cannot be queried on the type "Mutation"

"Send the selected radio button options chosen by the user, with the values specified in a JSON format

Show the current phone number with the default flag instead of choosing the appropriate one using the initial country flag in intl-tel-input

Expanding a Node.js class to incorporate additional static class elements

Implementing Node.JS ajax to update current JSON information

Trouble with formatting credit card numbers in Vue.js