Halten Sie Daten zwischen den Seiten in eckigen js

Question

Ich bin neu in angular js.Bitte schlagen Sie vor, welche besser ist. Ich habe eine Seite, auf der ich eine Anzahl von Kontrollkästchen auswählen und zur zweiten Seite navigieren kann. Ich möchte die überprüften Werte anzeigen, wenn ich im Browser die Zurück-Taste drücke. Welches ist besser mit $ rootScope oder stateparam oder localstorage.Bitte beachten Sie auch die Leistung.

Answer 1

gehen durch die Optionen eins nach dem anderen:

1. $rootScope: Sie sollten versuchen, diese Option zu verwenden zu vermeiden, da es zu den globalen Zustand zugeordnet ist. Verwenden Sie diese Option nur, wenn Sie möchten, dass die von Ihnen festgelegten Daten global in der gesamten App verfügbar sind und Sie die gleichen Variablennamen an keiner anderen Stelle wiederverwenden möchten.
2. $stateParams: Diese gehen normalerweise in den Status-URI als a dynamic part der gesamten URL. Dies hat nur eine begrenzte Verwendung und ist möglicherweise keine gute Idee für Ihren Anwendungsfall, in dem Sie Daten aus mehreren Kontrollkästchen speichern müssen.
3. localStorage: Dies ist langsamer als die Verwendung einer JavaScript-Variablen und damit not a good idea.

Dienstleistungen:

Hier ist eine bessere Lösung für Sie, ganz im AngularJS Paradigma: AngularJS services

Auszug aus dem Link in Punkt 3:

Daten sollte auch in Diensten gespeichert werden, außer wo es gebunden wird an die $scope. Services sind Singletons, die während der gesamten Lebensdauer der Anwendung bestehen, während Controller zwischen Anwendungsstatus transient sind. Wenn Daten in der Steuerung gespeichert werden, müssen sie bei der Wiederherstellung abgerufen werden. Auch wenn die Daten in localStorage gespeichert sind, ist es um eine Größenordnung langsamer abzurufen als von mit einer Javascript-Variable.

Sie können den Service verwenden, um Ihre Daten in Ihrem Controller überall in der App einheitlich festzulegen und abzurufen. Hier

ist ein indikatives Beispiel:

app.factory('formDetails', formDetails); 

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

Verwenden Sie es in Ihrem Controller wie:

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); 

}]);