anglejsアプリケーションでフォームの状態と進行状況を保存するためのベストプラクティスはありますか？

Question

私はangularjsにマルチステップウィザードを書いています。各ステップで、サーバーに保存し、ウィザードの次のステップに進みます。

単純なリンクを使用して次のステップに進み、バックエンドサーバーに保存すると、ブラウザの履歴を保持しながら自分の位置を更新しますが、この方法はGETが安全で冪等であるという意図に反します。

代わりにこのアプローチを採用しています。

$scope.progressToSetp2 = function() { 

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

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

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

これは良いアプローチですか？より良いアプローチがありますか？

ありがとうございました。

Answer 1

もちろんあります！なぜ各ステップでサーバーに保存していますか？それは思考の角度の方法ではありません。

ベストプラクティスは、スコープ内の状態を保存してローカル検証を行い、終了後に送信時のステップ全体をバックエンドに保存することです。 （ローカルの検証によってバックエンド検証の必要性が取り消されません）

さらに練習したい場合は、サービスを使用してデータを保持してください。あなたは、各ステップでユーザの入力を気にして複数のセッションのために彼/彼女のためにそれを維持したい場合は、すべての手順を仕上げまで、一時的にクライアント側での入力データを保存することが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); 
      }); 
     } 
    }; 
}) 

を見てください。

もすべてthisブログに

Answer 2

を読んで、より良いアプローチは、タスクへのあなたのプロセスを打破し、情報をシリアル化し、各タスクの完了時にデータベースにそれを持続することです。

最終ステップが完了したら、すべてをもう一度やり直す必要はありません。ワークフロー内の永続化されたステップを処理するWeb APIを呼び出すことができます。

このように、後で（意図的にまたはシステム障害が発生した場合）、ワークフローを続行することができます。

ワークフロー/プロセスをタスクに分割することで、プロセスの理解をさらに深めることができます。このアプローチの素晴らしい副作用です。