Question

在Angular中，速度是游戏的名称，并且总是追求尽可能快地渲染具有有用数据的视图。 Angular允许我们使用Angular的模板引擎无缝地引用Controller和View之间的数据，这可以使正确绑定数据的渲染视图快速闪烁。

例如，假设我们有一个简单的Angular App，它只是一个包含First Name，Last Name，Phone，Email和Address等字段的联系人表。然后，我们需要在单击表行时显示的“详细信息”视图。我们可以连接<tr>来更改点击次数视图

<tr ng-repeat="contact in Contacts" ng-click="showDetails(contact)">

然后我们可以立即更改视图和＆＃34;在新视图中显示contact个数据。例如，我们可以使用<h1>中提供的数据将页面顶部的showDetails更改为联系人 - John Smith 。

显示此数据时，可以异步从服务器检索更多数据，然后填充其余字段。

但是，如果我们想直接从网址访问此详细信息页面，该怎么办？如果contact表格位于/contacts且详细信息页面类似于/contacts/detail/1，那么尝试直接转到/contacts/detail/1会导致上面的<h1>是空白的。

这显然是因为我们没有使用showDetails()方法来调用视图并直接将点击的contact传递给它。在这种情况下，我们需要获取URL中的联系人ID并运行AJAX请求以获取所有数据。

我的问题是，在什么时候我们在尝试使我们的观点和数据快速访问并使它们健壮之间划清界线？

Answer 1

健壮是必须的。

所以我们需要从那里开始。然后，我们可以尽可能地向前推进以优化和制作数据，并尽可能地快速访问数据。

为了做到这一点，SPA中与URL直接相关的每个视图都需要最初是无状态的。这基本上意味着重新加载任何URL将正确和完整地加载所需的视图。

我们可以通过使用嵌套路线获得两全其美。如果每条路线只加载它所需要的东西，而且还绘制父路线（必要时加载它们，或者只要已经提供它们就使用它们），那么你可以实现稳健性和快速可访问性＆＃34;数据。

在您的特定示例中，基本路线为contacts。然后可能会有一个嵌套的路由，它会显示特定联系人的详细信息contacts/detail/{id}。加载基本URL将加载联系人列表，加载详细信息视图将加载联系人列表和特定联系人的详细信息。为了在转到嵌套视图时提供快速访问的数据，我们可以包含检查父视图数据是否已加载的逻辑，并且只在必要时加载。然后，当从contacts导航到contacts/detail/{id}视图时，我们可以在子视图中快速显示父视图中的数据，同时加载特定于子视图的数据。在contacts/detail/{id}重新加载只会加载两者。导航回父级时，父数据已经加载。

Answer 2

如果您使用ui-router之类的东西创建复杂路线，那么您不会使用showDetails()来改变模型，您可以使用showDetails()来改变路线。然后你的模型会根据路线自行设定，你的视图就会跟随。

例如，您可以使用以下内容：

$scope.showDetails = function(contact) {
    $state.go('contacts.detail', { contactId: contact.id });
};

然后，控制器可以使用$stateParams从服务器检索您想要的特定联系人的任何数据（使用promises异步）。您还可以通过服务包含自己的缓存/加载风格，以便在必要时管理性能等事项。

AngularJS - 删除SPA和AJAX数据绑定之间的界限

2 个答案: