angularjs - 在 angularjs 应用程序中保存表单状态和进度的最佳实践？

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

当然有!为什么每一步都保存到服务器？这不是有 Angular 的思考方式。

最佳做法是将状态保存在范围内并进行本地验证，完成后将整个步骤保存到后端发送。 (本地验证不会取消后端验证的需要)

如果您想要更好的实践，请使用服务来保存数据。看 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);
            });
        }
    };
})

如果您关心用户在每个步骤中的输入并希望为他/她保留多个 session ，您可以将输入数据临时保存在客户端，直到完成所有步骤。

也阅读所有 this博客