Refreshing Angular Services: A Guide to Resetting Factories

Question

Refreshing Angular Services: A Guide to Resetting Factories

My angular factory is quite intricate and structured like this:

app.factory("mainFcty", function(){
    return {
        a:"",
        b:"",
        c:""
    }
});

When users progress through the app and complete actions such as booking a service, they fill out the above form. However, when they add the data to a shopping cart and start over with mainFcty, old bindings seem to reappear and overwrite new data collected.

I need a solution to reset all previous bindings of mainFcty before continuing the process. Any suggestions on how to completely remove traces of the old data?

Your help is highly valued!

javascript angularjs service factory

Answer 1

Answer №1

Start by setting up a values object and then transfer these values to the factory object that can be returned. Implement a method that allows for updating current values with default ones.

To see an example, check out: https://jsfiddle.net/xmtkg5tz/1/

var app = angular.module('myApp',[])
.factory("mainFcty", [function() { 
    var current_data = {}; 
    var default_values = { 
        a:"", 
        b:"I am a default that is not-empty", 
        c:"",
        resetData: function() { 
            console.log( 'Resetting')
            return current_data = angular.extend( current_data, default_values ); 
       } 
    }; 
    default_values.resetData();
    return current_data;
}])
.controller('exampleCtrl',['$scope', 'mainFcty', function($scope,mainFcty) {
    $scope.fcty = mainFcty;
    $scope.submit = function() { 
        console.log( 'reset?', $scope.fcty.a, $scope.fcty.b, $scope.fcty.c ); 
        console.log( 'Before:', mainFcty );
        mainFcty.resetData(); 
        console.log( 'After:', mainFcty ); 
    };
}]);

Answer 2

Start by setting up a values object and then transfer these values to the factory object that can be returned. Implement a method that allows for updating current values with default ones.

To see an example, check out: https://jsfiddle.net/xmtkg5tz/1/

var app = angular.module('myApp',[])
.factory("mainFcty", [function() { 
    var current_data = {}; 
    var default_values = { 
        a:"", 
        b:"I am a default that is not-empty", 
        c:"",
        resetData: function() { 
            console.log( 'Resetting')
            return current_data = angular.extend( current_data, default_values ); 
       } 
    }; 
    default_values.resetData();
    return current_data;
}])
.controller('exampleCtrl',['$scope', 'mainFcty', function($scope,mainFcty) {
    $scope.fcty = mainFcty;
    $scope.submit = function() { 
        console.log( 'reset?', $scope.fcty.a, $scope.fcty.b, $scope.fcty.c ); 
        console.log( 'Before:', mainFcty );
        mainFcty.resetData(); 
        console.log( 'After:', mainFcty ); 
    };
}]);

Answer 3

Answer №2

One technique that has worked well for me is to declare the variable at the beginning of the factory, then call reset, and whenever necessary, use reset to reset the variable.


.factory('sharedDataUserFlowService', function () {
        var serviceVariables;
        resetData();
        return {
            resetData: resetData,
            triggerFormCheck: triggerFormCheck
        };

        function resetData() {
             serviceVariables = {
                 triggerFormValidateCheck: false,
                 triggerBlockStageVariable: null,
                 isFormValid: false,
                 blockedStage: null,
                 isProcessEnd: false
             }
        }

        function triggerFormCheck() {
            serviceVariables.triggerFormValidateCheck = !serviceVariables.triggerFormValidateCheck;
        }

This can be called from anywhere it is injected using

sharedDataUserFlowService.resetData();

Best of luck!

Answer 4

One technique that has worked well for me is to declare the variable at the beginning of the factory, then call reset, and whenever necessary, use reset to reset the variable.


.factory('sharedDataUserFlowService', function () {
        var serviceVariables;
        resetData();
        return {
            resetData: resetData,
            triggerFormCheck: triggerFormCheck
        };

        function resetData() {
             serviceVariables = {
                 triggerFormValidateCheck: false,
                 triggerBlockStageVariable: null,
                 isFormValid: false,
                 blockedStage: null,
                 isProcessEnd: false
             }
        }

        function triggerFormCheck() {
            serviceVariables.triggerFormValidateCheck = !serviceVariables.triggerFormValidateCheck;
        }

This can be called from anywhere it is injected using

sharedDataUserFlowService.resetData();

Best of luck!

Refreshing Angular Services: A Guide to Resetting Factories

Answer №1

Answer №2

Similar questions

Error encountered: `unexpected token within ES6 map() function`

What is the reason for and <br> not functioning in a string?

Attempting to implement usedispatch hook in combination with userefs, however, encountering issues with functionality

Is it necessary to dispose of node.js domains? When is the appropriate time to do so?

How to prevent v-menu from overlapping a navbar in Vue.js

Error encountered: The function 'showErrorMessage' is not exported from the file '../helpers/alerts'

UI thread was blocked due to withProgress being invoked from an external library function

Node.js user update complete

The Hidden Div containing NicEdit is now shrunk down to a smaller size

Error code 403 has been reported by Stripe's payment_init.php as a forbidden request

Simplifying complex JSON structures by un-nesting arrays

What is the process for showcasing a local notification within my application?

I have a vision of creating a unique Countdown Stopwatch that meets all my

Tips for eliminating the domain name from the src URL attribute using Jquery

Exploring the combination of Babel and Next.js: Integrating custom scripts into a project

Customizing Django forms.Textarea in template or declaring in models is essential for creating a unique

I am unsure about the installation process of AngularJS in my application and I need to update it

What is the best way to add methods to underscore without making them available globally?

What sets Protractor apart from Grunt?

Is there a way to change the text (price) when I select an option?