前端工程:逐步实现检出车的最佳方法

Question

我实现了这样一个结帐车：

导航规则如下：

• 用户只有在完成当前步骤后才能移动到下一步。
• 但他可以自由地点击前一个选项卡并编辑过去的信息。

目前，我已经使用jquery在一个页面中实现了这一点。然而，代码看起来非常混乱，大量的显示和隐藏。

是否更好的解决方案是将每个选项卡实现为具有单独url的单独页面，并使用会话变量存储以前选项卡中的数据？

还是我应该去重写一次有角度的？

Answer 1

如果您在使用Angularjs时使用Jquery，那么您的做法是错误的，除非您是通过指令执行的。

更好地利用angularjs的模板功能，可以减少对DOM的操作：

• 您可以使用ng显示/ng隐藏来管理组件的显示。
• 表单处理、绑定、验证由Angularjs管理，您可能需要一些定制指令，检查文档和大量在线示例。
• 假设您的所有表单都命名为"formX“，其中X是数字。除了第一个：ng-disabled="formX.$invalid之外，您可以在每个块上包装每个表单。这将防止打开表单的其他部分，只要前面的表单尚未完成。

是否更好的解决方案是将每个选项卡实现为具有单独url的单独页面，并使用会话变量存储以前选项卡中的数据？

我有这一点，但是我使用ui路由器(替换angularjs的默认路由器组件)，所以按照SPA中的说明实现，所以我不需要在会话变量中存储状态。

Answer 2

您所描述的工作流(包含多个视图和有状态步骤)似乎足够复杂，您肯定会从使用某种框架中获益。角是一个很好的选择，特别是当你已经熟悉它的时候。