Question

我正在构建一个具有＆＃34; Web Planner＆＃34;用户在多个页面之间进行操作以完成大型过程。每个页面提供的信息比最后一个页面和某些页面更多依赖于其他页面来获取正确的数据。

例如，让我们举个例子：

Customer Info -> Accounts -> Settings -> Final Review

这是一个4页＆＃34; Web Planner＆＃34;用户必须在我们的网站上下订单之前完成。现在我有一个RootController用于所有页面共享的函数和数据，然后我为其他每个页面都有其他控制器。

有意义的是，Final Review页面将包含来自所有先前页面的信息，并且会产生＆＃34;摘要＆＃34;网络规划师。我们允许用户“保存”＃34;他们在任何给定步骤的订单，然后稍后返回。因此，他们不会总是按照上述顺序进入Final Review。

所以我的问题是，组织和构建此应用程序的最佳方式是什么，即使用户打开浏览器并直接转到Final Review，他们也会收到所有正确的信息。

将所有API调用放在RootController上似乎很简单，然后无论它们访问哪个页面，我们都会一次性检索所有数据。唯一的问题在于，当他们遇到＆＃34; Save＆＃34;时，取决于他们在Web Planner中的位置。只有部分信息可用。

是否有以这种方式跨多个页面共享信息的标准方法？

Answer 1

我建议使用AngularJS服务在流程中的每个页面之间共享信息。服务通常用于控制器之间的数据共享。

示例服务

对于您的示例，您可能希望创建类似WebPlanner服务的内容。这将跟踪流程中每个步骤的所有数据。下面是一个非常基本的示例，因此您需要使用RootController中的模型展开它。

var myApp = angular.module('myApp', []);
myApp.factory('WebPlanner', function() {
    return {
        customerInfo: {
            name: ''
        },
        accounts {
            accountId: ''
        },
        settings {
            exampleSetting: false
        },
        finalReview {
            userHasConfirmed: false
        }
    }
})

示例控制器

然后，您可以在流程的每个步骤从控制器访问此服务。这将允许您的每个控制器读取和写入服务中存储的数据。

写作：

function CustomerInfoCtrl($scope, WebPlanner){
    WebPlanner['customerInfo']['name'] = $scope.name;
}

读：

function FinalReviewCtrl($scope, WebPlanner){
    $scope.userHasConfirmed = WebPlanner['finalReview']['userHasConfirmed'];
}

您可以在以下位置阅读有关服务的更多信息：
https://docs.angularjs.org/guide/services

在AngularJS中组织模型的标准实践

1 个答案: