Procedura consigliata per salvare lo stato del modulo e il progresso nell'applicazione angularjs?

Question

Sto scrivendo un wizard in più fasi in angularjs. In ogni passaggio, desidero salvare sul server e passare al passaggio successivo nella procedura guidata.

L'utilizzo di collegamenti semplici per passare al passaggio successivo e il salvataggio sul server di backend è semplice e aggiorna la mia posizione, mantenendo la cronologia del browser, ma questo approccio viola l'intento di GET di essere sicuro e idempotente.

Sto adottando questo approccio;

$scope.progressToSetp2 = function() { 

    $http.put('quote/' + $routeParams.quoteId, $scope.quote)....; 

    $scope.OnAfterSubmit = function() { 
     $location.path('/steptwo').replace(); 
     $scope.$apply(); 
    }; 

$scope.includeFormPartial = 'partials/steptwo.html'; 
}; 

È un buon approccio? Ci sono approcci migliori?

Grazie.

Answer 1

ovviamente ci sono! perché stai salvando sul server in ogni fase? non è il modo angolare di pensare.

la best practice è di salvare lo stato nell'ambito e fare la convalida locale, e dopo aver terminato si salva sul back-end l'intera procedura di invio. (la convalida locale non annulla la necessità di convalida del back-end)

Se si desidera un utilizzo ancora migliore, utilizzare un servizio per conservare i dati. Guardate this

angular.module('myApp', []) 
.service('notesService', function() { 
    var data = [ 
     {id:1, title:'Note 1'}, 
     {id:2, title:'Note 2'}, 
     {id:3, title:'Note 3'}, 
     {id:4, title:'Note 4'}, 
     {id:5, title:'Note 5'}, 
     {id:6, title:'Note 6'}, 
     {id:7, title:'Note 7'}, 
     {id:8, title:'Note 8'} 
    ]; 

    return { 
     notes:function() { 
      return data; 
     }, 
     addNote:function (noteTitle) { 
      var currentIndex = data.length + 1; 
      data.push({ 
       id:currentIndex, title:noteTitle 
      }); 
     }, 
     deleteNote:function (id) { 
      var oldNotes = data; 
      data = []; 

      angular.forEach(oldNotes, function (note) { 
       if (note.id !== id) data.push(note); 
      }); 
     } 
    }; 
}) 

Se vi preoccupate per l'input utente in ogni passaggio e vuole tenerlo per lui/lei per più sessioni, è possibile salvare i dati di ingresso del lato client temporaneamente fino a quando la finitura tutti i passaggi.

anche leggere tutti i blog this

Answer 2

Un approccio migliore è quello di abbattere il processo per le attività e le informazioni serializzare e persistono che alla base di dati su ogni completamento dell'attività.

Al termine del passaggio finale non è necessario inviare di nuovo nuovamente tutto. È sufficiente chiamare la web api che elabora i passaggi persistenti nel flusso di lavoro.

Come accennato, questo consente all'utente di continuare il flusso di lavoro in seguito (intenzionalmente o in caso di errore di sistema).

L'interruzione del flusso di lavoro/processo nelle attività ti aiuterà anche a capire un po 'di più il processo. Quale è un bell'effetto collaterale di questo approccio.