CODEWITHSUNDEEP
angularjs
619
619

Reputation: 31

Hold data between pages in angular js

I am new to angular js.Please suggest which one is better . I have a page where I can select a no of check boxes and navigate to 2 nd page.I want to show the checked values when I press back button in browser. Which one is better using $rootScope or stateparam or localstorage.Please consider performance also.

Upvotes: 1

Views: 1004

Answers (1)

ryder
ryder

Reputation: 897

Going through your options one by one:

  1. $rootScope: You should try to avoid using this option as it is associated to the global state. Use this option only if you want the data you set to be globally available throughout the app and do not want to reuse the same variable names anywhere else.
  2. $stateParams: These typically go into the state URI as a dynamic part of the whole URL. This has only limited usage, and may not be a good idea for your use case where you need to store data from multiple checkboxes.
  3. localStorage: This is slower than using a JavaScript variable, and hence not a good idea.

Services:

Here is a better solution for you, entirely within the AngularJS paradigm: AngularJS services

Excerpt from the link in point 3:

Data should also be stored in services, except where it is being bound to the $scope. Services are singletons that persist throughout the lifetime of the application, while controllers are transient between application states. If data is stored in the controller then it will need to be fetched from somewhere when it is reinstantiated. Even if the data is stored in localStorage, it's an order of magnitude slower to retrieve than from with a Javascript variable.

You can use the service to set and get your data inside your controller anywhere in the app in a consistent manner.

Here is an indicative example:

app.factory('formDetails', formDetails);

function formDetails() {
    var formData = {};    
    return {
        getProperty: function () {
            return formData;
        },
        setProperty: function(values) {
            formData = values;
        }
    };
};

Use it in your controller as:

app.controller('MyController', [ '$scope', 'formDetails' , function($scope, formDetails) {
    $scope.checkboxData = {};

    // on load call service 'get' function
    $scope.checkboxData = formDetails.getProperty();

    // on some event/watch function call service 'set' function
    formDetails.setProperty($scope.checkboxData);

}]);

Upvotes: 2

Related Questions