AngularJS - Сохранение пользовательских настроек в службе

Question

Это мой частичный вид settings.html

<div ng-controller="settingsController"> 

    <h3>General Settings</h3> 
    <table class="table"> 
     <tbody> 
     <tr class="success"> 
      <td class = "col-xs-3">Language:</td> 
      <td class = "col-xs-9">Gmail display language: 
       <select ng-model = "userPreferences.selectedLang" ng-options="language for language in languages"> 
        <option value = ""> Choose a language </option> 
       </select> 
      </td> 
     </tr> 

     <tr class="danger"> 
      <td class = "col-xs-3">Conversation View</td> 
      <td class = "col-xs-9"> 
       <input type = "radio" name = "conversation" id = "converseOn" ng-model="userPreferences.converse.state" value = "on" checked> 
       <label for="converseOn"> Conversation view on </label> 

       <aside> 
        <input type = "radio" name = "conversation" ng-model="userPreferences.converse.status" value = "off" id = "converseOff"> 
        <label for="converseOff"> Conversation view off </label> 
       </aside> 
     </tr> 

     <tr class="info"> 
      <td class = "col-xs-3">Maximum page size: </td> 
      <td class = "col-xs-9"> Show conversations per page 
       <select ng-model = "userPreferences.selectedNumber" ng-options="conversation for conversation in conversations"> 
        <option value = ""> Choose the no.of conversations to display </option> 
       </select> 

       <aside id = "pageSize" > Show contacts per page 
        <select ng-model = "selectedNumberContacts" ng-options="contact for contact in contacts"> 
         <option value = ""> Choose the no.of contacts to display </option> 
        </select> 
       </aside> 
      </td> 
     </tr> 
    </tr> 
    </tbody> 
    </table> 

    <div class="form-actions" > 
     <button type="submit" class="btn btn-primary" ng-click = "setPreference()">Save changes</button> 
     <button type="button" class="btn">Cancel</button> 
    </div> 
</div> 

Это settingsController.js

(function() { 
    'use strict'; 

    var settingController = function (fetchDataService, $scope, savePreferenceService) { 
     var url = 'app/mock/settings.json'; 
     fetchDataService.getContent(url) 
      .then(function(response){ 
       $scope.contacts = response.data.contacts; 
       $scope.languages = response.data.languages; 
       $scope.conversations = response.data.conversations; 
       $scope.undoSend = response.data.undoSend; 
      }); 

     $scope.userPreferences = { 
      selectedLang : '', 

      converse : { 
        state: 'on' 
       }, 

       selectedNumber : 0 
      } 


     $scope.setPreference = function() { 
      savePreferenceService.selectedPreferences($scope.userPreferences.selectedLang, $scope.userPreferences.converse.state, $scope.userPreferences.selectedNumber); 
     } 
    }; 

    angular.module('iisEmail') 
     .controller ('settingsController', 
     ['fetchDataService', '$scope', 'savePreferenceService', settingController]); 
}()); 

Это savePreferenceService.js

(function() { 
    'use strict'; 

    var savePreferenceService = function() { 
     this.selectedPreferences = function (selectedLang, converse, selectedNumber) { 
      this.selectedLang = selectedLang; 
      this.converse = converse; 
      this.selectedNumber = selectedNumber; 

      console.log(this.selectedLang); 
      console.log(this.converse); 
      console.log(this.selectedNumber); 
     } 
    };  

     angular.module('iisEmail') 
     .service ('savePreferenceService', savePreferenceService); 
}()); 

Итак, в основном моя целью является сохранение пользовательских настроек, когда кнопка Save changes является кликой рунец.

Для достижения этой функциональности я определил объект в контроллере и привязал его свойства к виду с помощью ng-model. Когда нажата кнопка изменения изменений, вызывается функция setPreference(), которая вызывает вызов службы savePreferenceService. savePreferenceService сохраняет параметры, выбранные пользователем. Все работает так, как ожидалось.

Я просто хочу знать, есть ли лучший способ сделать это (с точки зрения передового опыта). Мое требование - сохранить параметры, выбранные пользователем в службе.

Answer 1

Похоже, что у вас есть работа для вас. Не уверен точно, что вы подразумеваете под «Я просто хочу знать, есть ли лучший способ сделать это», поскольку это довольно субъективно.

То, что я заметил сразу, заключается в том, что текущая реализация делает ваши пользовательские настройки сеансами основаны на том, что они сохраняются только в памяти, а это означает, что если пользователь использует приложение, вносит изменения в настройки, покидает приложение и возвращает , изменения теряются. Если вам нужно их сохранить, я бы предложил использовать LocalStorage или фактически сохранить их в хранилище данных определенного типа (файл, база данных ...).

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

• изменить услугу, чтобы получить метод получения и метод набора. Возможно, getPreferences() и setPreferences (...).
• изменить контроллер для вызова метода getPreferences вместо назначения статических настроек объекта
• вызвать метод setPreferences от метода setPreference контроллера

Answer 2

Я действительно не видел, как данные могли бы быть спасены, если вам сделать что-то вроде обновления страницы, если вы не показываете здесь код?

Если вы хотите сохранить сохранение данных, когда пользователь посещает вашу страницу, вы всегда можете использовать localstorage, в котором хранится информация в браузере пользователя. Существуют различные веб-уроки о том, как использовать локальный магазин, но этот веб-сайт (который не заставил себя долго ждать) включает и расширяет localstorage в качестве службы и использует эту услугу в качестве способа хранения данных там.

http://learn.ionicframework.com/formulas/localstorage/ (код ниже берется по этой ссылке)

angular.module('ionic.utils', []) 

.factory('$localstorage', ['$window', function($window) { 
    return { 
     set: function(key, value) { 
     $window.localStorage[key] = value; 
    }, 
    get: function(key, defaultValue) { 
     return $window.localStorage[key] || defaultValue; 
    }, 
    setObject: function(key, value) { 
     $window.localStorage[key] = JSON.stringify(value); 
    }, 
    getObject: function(key) { 
     return JSON.parse($window.localStorage[key] || '{}'); 
    } 
}}]); 

и воспользоваться этой услугой:

angular.module('app', ['ionic', 'ionic.utils']) 

    .run(function($localstorage) { 

     $localstorage.set('name', 'Max'); 
     console.log($localstorage.get('name')); 
     $localstorage.setObject('post', { 
      name: 'Thoughts', 
      text: 'Today was a good day' 
     }); 

    var post = $localstorage.getObject('post'); 
    console.log(post); 
}); 

Или вы могли бы просто использовать LocalStorage старый способ моды, используя обычный старый JavaScript. .

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API