问题 保存angularjs应用程序中的表单状态和进度的最佳实践?


我在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';
};

这是一个好方法吗?有更好的方法吗?

谢谢。


4188
2017-10-29 17:18


起源



答案:


当然有!为什么要在每一步中保存到服务器?它不是有棱有角的思维方式。

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

如果您想要更好的练习,请使用服务来保存数据。看着 这个 

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

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

也阅读全部 这个 博客


10
2017-10-30 14:02



感谢您的答案@ aladdin-homs,我想在步骤之间保存到服务器的原因是,即使用户放弃了该过程,我也会在向导中捕获数据。向导的唯一必需步骤是第一步,其他步骤是可选的问题/操作。我将探索使用服务满足我的需求,但我最初的问题仍然存在;如何在保持浏览器历史记录的同时通过向导的步骤最佳地实现进展(以便浏览器后退/前进按钮工作)并在每次转换之间对我的后端执行PUT。 - jevonearth
我可以看到你的观点,但后来我无法帮助你 - Aladdin Mhemed
@jevonearth你如何成功实施?我处于相同的情况,我们正在构建一个多步形式,并且在每个步骤之后必须保存信息,因为它是一个大的形式,并且用户可以在任何点(在第一个之后)停止。 - Fabrício


答案:


当然有!为什么要在每一步中保存到服务器?它不是有棱有角的思维方式。

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

如果您想要更好的练习,请使用服务来保存数据。看着 这个 

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

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

也阅读全部 这个 博客


10
2017-10-30 14:02



感谢您的答案@ aladdin-homs,我想在步骤之间保存到服务器的原因是,即使用户放弃了该过程,我也会在向导中捕获数据。向导的唯一必需步骤是第一步,其他步骤是可选的问题/操作。我将探索使用服务满足我的需求,但我最初的问题仍然存在;如何在保持浏览器历史记录的同时通过向导的步骤最佳地实现进展(以便浏览器后退/前进按钮工作)并在每次转换之间对我的后端执行PUT。 - jevonearth
我可以看到你的观点,但后来我无法帮助你 - Aladdin Mhemed
@jevonearth你如何成功实施?我处于相同的情况,我们正在构建一个多步形式,并且在每个步骤之后必须保存信息,因为它是一个大的形式,并且用户可以在任何点(在第一个之后)停止。 - Fabrício


更好的方法是将进程分解为任务并序列化信息,并在每次任务完成时将其保留到数据库中。

完成最后一步后,您不必重新提交所有内容。您只需调用web api即可处理工作流中的持久步骤。

就像你提到的那样,这使用户能够在以后继续工作(有意或者在系统出现故障的情况下)。

将工作流程/流程分解为任务也可以帮助您更好地理解流程。这种方法的副作用很好。


1
2018-04-13 06:26