"Delving into the intricacies of Angular's factory

Question

"Delving into the intricacies of Angular's factory

If I have a factory like the one below:

app.factory("categoryFactory", function (api, $http, $q) {    
    var selected = null;
    var categoryList = [];
    return {
        getList: function () {
            var d = $q.defer();
            if(categoryList.length  <= 0){
                $http.get(api.getUrl('categoryStructure', null))
                    .success(function (response) {
                        categoryList = response;
                        d.resolve(categoryList);
                    });
            }
            else
            {
                d.resolve(categoryList)
            }
            return d.promise;
        },
        setSelected: function (category) {
            selected = category;
        },
        getSelected: function () {
            return selected;
        }
    }    
});

Now, I have two controllers using this factory simultaneously. Both controllers need to be alerted when there are updates, so I implemented the following:

app.controller('DashboardController', ['$http', '$scope', '$sessionStorage', '$log', 'Session', 'api','categoryFactory', function ($http, $scope, $sessionStorage, $log, Session, api, categoryFactory) {

$scope.selectedCategory = categoryFactory.getSelected();

}]);

The other controller is as follows:

app.controller('NavController', ['$http', '$scope', '$sessionStorage', '$log', 'Session', 'api', 'FileUploader', 'categoryFactory', function ($http, $scope, $sessionStorage, $log, Session, api, FileUploader, categoryFactory) {
$scope.categories = [];

categoryFactory.getList().then(function (response) {
$scope.categories = response;
});
$scope.selectCategory = function (category) {
categoryFactory.setSelected(category);
}

}]);

However, when the value was changed in the NavController, it did not reflect in the DashboardController.

My question is how can I either set up a watch or another method to receive notifications when the value changes?

javascript angularjs data-binding angularjs-scope angularjs-service

Answer 1

Answer №1

If you want to implement an observer pattern in your AngularJS application, follow this example:

app.factory("categoryFactory", function (api, $http, $q) {   
    // the list of callbacks to call when something changes
    var observerCallbacks = []; 

    // ...

    function notifyObservers() {
        angular.forEach(observerCallbacks, function(callback) {
            callback();
        });
    }

    return {
        setSelected: function (category) {
            selected = category;
            // notify the observers after you change the value
            notifyObservers();
        },
        registerObserver: function(callback) {
            observerCallbacks.push(callback);
        }
    }    
});

In your controllers, for example 'NavController':

app.controller('NavController', ['$http', '$scope', '$sessionStorage', '$log', 'Session', 'api', 'FileUploader', 'categoryFactory', function ($http, $scope, $sessionStorage, $log, Session, api, FileUploader, categoryFactory) {
    // ...

    // initialization
    (function() {
        categoryFactory.registerObserver(function() {
            categoryFactory.getList().then(function (response) {
                $scope.categories = response;
            });
        });
    })();

}]);

Whenever setSelected is called, all registered callbacks in observerCallbacks will be triggered. You can register these callbacks from any controller since factories are singletons.

Edit: It's possible that the notifyObservers() call is placed incorrectly in the code and the update call might not be right either, but the overall architecture remains. In the registerObserver function, define what needs to happen when values are updated and remember to call notifyObservers() whenever necessary.

Answer 2

If you want to implement an observer pattern in your AngularJS application, follow this example:

app.factory("categoryFactory", function (api, $http, $q) {   
    // the list of callbacks to call when something changes
    var observerCallbacks = []; 

    // ...

    function notifyObservers() {
        angular.forEach(observerCallbacks, function(callback) {
            callback();
        });
    }

    return {
        setSelected: function (category) {
            selected = category;
            // notify the observers after you change the value
            notifyObservers();
        },
        registerObserver: function(callback) {
            observerCallbacks.push(callback);
        }
    }    
});

In your controllers, for example 'NavController':

app.controller('NavController', ['$http', '$scope', '$sessionStorage', '$log', 'Session', 'api', 'FileUploader', 'categoryFactory', function ($http, $scope, $sessionStorage, $log, Session, api, FileUploader, categoryFactory) {
    // ...

    // initialization
    (function() {
        categoryFactory.registerObserver(function() {
            categoryFactory.getList().then(function (response) {
                $scope.categories = response;
            });
        });
    })();

}]);

Whenever setSelected is called, all registered callbacks in observerCallbacks will be triggered. You can register these callbacks from any controller since factories are singletons.

Edit: It's possible that the notifyObservers() call is placed incorrectly in the code and the update call might not be right either, but the overall architecture remains. In the registerObserver function, define what needs to happen when values are updated and remember to call notifyObservers() whenever necessary.

Answer 3

Answer №2

By implementing the dot rule, you can ensure that prototypal inheritance is properly followed in your AngularJS code.

The key is to have an object within your service that contains a selected variable, eliminating the need for a getSelected method.

Factory

app.factory("categoryFactory", function(api, $http, $q) {
    var categoryFactory = {};
    categoryFactory.getList = function() {
        var d = $q.defer();
        if (categoryList.length <= 0) {
            $http.get(api.getUrl('categoryStructure', null))
                .success(function(response) {
                    categoryList = response;
                    d.resolve(categoryList);
                });
        } else {
            d.resolve(categoryList)
        }
        return d.promise;
    }
    categoryFactory.setSelected = function(category) {
        categoryFactory.data.selected = category;
    }
    categoryFactory.data = {
        selected: null
    }
    return categoryFactory;
});

Controller

app.controller('DashboardController', ['$http', '$scope', '$sessionStorage', '$log', 'Session', 'api', 'categoryFactory',
    function($http, $scope, $sessionStorage, $log, Session, api, categoryFactory) {
        //this will provide you binding without watcher
        $scope.selection = categoryFactory.data;
    }
]);

Simply use {{selection.selected}} in the HTML section to automatically update the value when changes occur in the selection.

Answer 4

By implementing the dot rule, you can ensure that prototypal inheritance is properly followed in your AngularJS code.

The key is to have an object within your service that contains a selected variable, eliminating the need for a getSelected method.

Factory

app.factory("categoryFactory", function(api, $http, $q) {
    var categoryFactory = {};
    categoryFactory.getList = function() {
        var d = $q.defer();
        if (categoryList.length <= 0) {
            $http.get(api.getUrl('categoryStructure', null))
                .success(function(response) {
                    categoryList = response;
                    d.resolve(categoryList);
                });
        } else {
            d.resolve(categoryList)
        }
        return d.promise;
    }
    categoryFactory.setSelected = function(category) {
        categoryFactory.data.selected = category;
    }
    categoryFactory.data = {
        selected: null
    }
    return categoryFactory;
});

Controller

app.controller('DashboardController', ['$http', '$scope', '$sessionStorage', '$log', 'Session', 'api', 'categoryFactory',
    function($http, $scope, $sessionStorage, $log, Session, api, categoryFactory) {
        //this will provide you binding without watcher
        $scope.selection = categoryFactory.data;
    }
]);

Simply use {{selection.selected}} in the HTML section to automatically update the value when changes occur in the selection.

"Delving into the intricacies of Angular's factory

Answer №1

Answer №2

Similar questions

Is there a way to make the text on my Bootstrap carousel come alive with animation effects?

Angular: encountering an issue with reading the property 'then' of undefined object

What is the method for showing a JavaScript variable in a popup window?

Sending a `refresh` to a Context

The system cannot locate the "default" task. Please consider using the --force option to proceed. The process has been halted due to warnings

"Learn the process of integrating Javascript files from the Angular assets folder into a specific Angular component or module (such as Angular 2, 4,

Clear v-model without changing its associated values

I attempted to create a test scenario to verify that the length of the tasks array is not negative. However, when trying to test this using 'not.toBe' in the code below, an error was encountered

Passing an object from an Angular application to a backend server in Node.js using the

How can we use jQuery to animate scrolling down to a specific <div> when clicking on a link in one HTML page and then navigating to another HTML page?

Exploring nested static properties within TypeScript class structures

Instructions on removing an HTML element from a div that has the attribute contentEditable

Using NodeJS to convert a Base64 string into a JPEG image with the help of either NodeJS or

Can you tell me the appropriate type for handling file input events?

The Art of JavaScript Module Patterns in Image Sliders

Unexpected database query result in Node.js

The accuracy of getBoundingClientRect in calculating the width of table cells (td)

When using nodejs with sqlite3, the first callback parameter returns the class instance. How can this be resolved in order to prevent any issues?

Transforming JSON object to an array of arrays using JavaScript

Achieving uniform width in material ui: Tips for maintaining consistency