AngularJS - saving data between routes

Question

What would be the best way to save data between routes?
So I have a form that has 4 steps and I would like for the data from a previous step to be carried over to the next step.

Right now, I'm using a "service" to save the data, which works. However, the problem is since a "service" is singleton, navigating away from the form, and coming back to it, will still has all the data from a previous incomplete or abandoned form.

Is there a good way to solve this kind of situation?

Thank you,
Tee

Answer 1

Why don't you enhance the service to take care of deleting the stored data when:

• The user does not complete the form and navigates away from the entire form submission process
• The user submits the form

Basically, you could enhance your service as follows:

myApp.factory('myService', function () {
    var formData = {};

    return {
        getData: function () {
            //You could also return specific attribute of the form data instead
            //of the entire data
            return formData;
        },
        setData: function (newFormData) {
            //You could also set specific attribute of the form data instead
            formData = newFormData
        },
        resetData: function () {
            //To be called when the data stored needs to be discarded
            formData = {};
        }
    };
});

Your controller could then be as follows:

myApp.controller('FirstStepCtrl', ['$scope', 'myService', function ($scope, myService) {
    //This is the controller of the first step in the form
    //Reset the data to discard the data of the previous form submission
    myService.resetData();

    //Remaining Logic here
}]);

myApp.controller('LastStepCtrl', ['$scope', 'myService', function ($scope, myService) {
    //This is the controller of the last step in the form

    //Submits the form
    $scope.submitForm = function () {
        //Code to submit the form

        //Reset the data before changing the route - assuming successful submission
        myService.resetData();

        //Change the route
    };

    //Remaining Logic here
}]);

Another alternative is to call the service's resetData() function when the route changes to something that is not within the form application. If you have something like a Parent Controller for the Form step controllers, then in that controller, you could keep a watch over the route change:

$scope.$on('$routeChangeStart', function() { 
   //Use $location.path() to get the current route and check if the route is within the 
   //form application. If it is, then ignore, else call myService.resetData()

   //This way, the data in the forms is still retained as long as the user is still
   //filling up the form. The moment the user moves away from the form submission process,
   //for example, when explicitly navigating away or when submitting the form, 
   //the data is lost and no longer available the next time the form is accessed
 });

Answer 2

Services will persist throughout your applications's life. So you should not have any problems. All you need to do is to create a Service and inject it to the controllers that need to access it. For instance, below I have injected User service to controllers.

Just use different controllers for each of your routes so that your model inside scope won't be overridden.

First controller for first route,

app.controller("FirstPageController", function($scope,User){   
    $scope.user = User;
    $scope.user.firstName  = "Emre";
    $scope.user.secondName = "Nevayeshirazi";
});

Second controller for second route,

app.controller("SecondPageController", function($scope,User){ 
    $scope.user = User;  
    $scope.user.age = 24;
});