Angular factory data lost after refresh

Question

I am using angular factory to pass data from one form to another form.

Working fine, but when I refresh the page, data lost from the page. How I can resolve this ?

I am using below code

angular.module('app')
    .factory('SignupService',function() {
        return {
                first_name : ''
        };
    } );

and I am assigning value like this in form1.

SignupService.first_name = $scope.first_name ; 

And getting value in form2 like this

function Signup2Ctrl($scope,$http,$location,$auth,$state, SignupService){
    alert(SignupService.first_name);
});

How to resolve this or any other alternative to handle this.

Thanks in advance.

Answer 1

AngularJS is used to build single-page web applications (SPA). When you reload the page, the application goes into its initial state. If you want to preserve any data, you should use browser cookies, local storage, cache etc.

Answer 2

The whole idea of AngualrJS is not to reload the page. That what makes it more suitable for developing native apps where the user doesn't have the option to relaod the page in the way a browser provides.

There is a way to prevent the code from resetting when a user hits refresh. You would nee to implement something like this:

var windowElement = angular.element($window);
windowElement.on('beforeunload', function (event) {
    // do whatever you want in here before the page unloads.        

    // the following line of code will prevent reload or navigating away.
    event.preventDefault();
});

To use it, simply create a .run instance and implement it there. Have you read about the loading order of an AngularJS app? Read more about it here: AngularJS app.run() documentation?

You should also look into $routeprovider: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

If reloading is a necessary part of your app, maybe you could create some kind of reload button if using the ngRoute module?