Удерживайте данные между страницами в угловых js

Question

Я новичок в угловых js.Пожалуйста, предложите, какой из них лучше. У меня есть страница, на которой я могу выбрать флажок «Нет» и перейти на вторую страницу. Я хочу показать отмеченные значения, когда я нажимаю кнопку «Назад» в браузере. Какой из них лучше использовать $ rootScope или stateparam или localstorage. Также рассмотрите производительность.

Answer 1

Переход через ваши варианты один за другим:

1. $rootScope: Вы должны стараться избегать использования этой опции, как он связан с глобальным государством. Используйте эту опцию только в том случае, если вы хотите, чтобы данные, которые вы установили, были глобально доступны во всем приложении и не хотите повторно использовать одни и те же имена переменных в другом месте.
2. $stateParams: Обычно они входят в URI состояния как a dynamic part всего URL-адреса. Это имеет ограниченное использование и не может быть хорошей идеей для вашего случая использования, когда вам нужно хранить данные из нескольких флажков.
3. localStorage: Это медленнее, чем использование переменной JavaScript, и, следовательно, not a good idea.

Услуги:

Вот лучшее решение для Вас, полностью в рамках парадигмы AngularJS: AngularJS services

Отрывок из ссылки в пункте 3:

данных также следует хранить в службах, за исключением случаев, когда он связан с номером $scope. Услуги - это одиночные игры, которые сохраняются на протяжении всего времени работы приложения , в то время как контроллеры являются переходными между состояниями приложений . Если данные хранятся в контроллере, тогда необходимо получить откуда-то, когда он будет восстановлен. Даже если данные хранятся в localStorage, это на порядок медленнее для получения, чем с переменной Javascript.

Вы можете использовать эту услугу для установки и получения ваших данных внутри вашего контроллера в любом месте приложения в соответствии.

Вот показательный пример:

app.factory('formDetails', formDetails); 

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

Используйте его в своем контроллере:

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

}]);