javascript - 在 SPA 和 Angular JS 中加载部分 View 的最佳方式是什么

Question

我有一个 SPA，页面中有 2 个部分。页面的第二部分根据一些业务逻辑参数不断变化。它可能发生在页面加载时或页面加载后。

我们可以有一个占位符，告诉元素根据某些输入加载这个特定的 View 吗？

对基于逻辑加载部分 View (第二部分)的方式感到困惑。

1) Angular Route——它可能无法正常工作，因为我正在尝试加载部分 View 而不是整个 View

2) 需要有“n”个 ng-includes，用于设置标志的 true 或 false 并更改 View 。

3) ng-使用一组语句进行切换，并要求切换根据值加载相应的 View

4) 状态提供者:https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-view

5) 自定义指令，根据条件决定加载哪个 View

还要考虑的一点是，一旦加载 View ，即使在更改 View 后，也应保留其中的内容。例如，我有 2 个 Angular 局部 View 。第一个 View 已加载，并且已执行一些操作或用户输入了一些数据，然后由于其他操作，已加载 View 2。完成 view2 中的操作后，我将切换回 view1。数据/DOM 应该从 view1 恢复，而不是加载新的 View 。

任何建议都会有帮助。

Answer 1

我在制作 http://crawfordcomputing.com/AkadineWebOS/#/ 时遇到了同样的问题

这是一个单页应用程序，我使用一个单一的路线。现在，页面上的图标不是标题的一部分，人们通常会在标题中找到菜单，它们实际上是 View 的一部分。我使用主视图，其中所有 View 都加载到数组 $scope.panes[] 中。然后 ng-repeat 从数组中加载所有 View ，如下所示:

<div ng-repeat="pane in panes">
    <div id="{{pane.windID}}" style="position: absolute; top: {{pane.x}}; left: {{pane.y}}; border: 2px solid black; min-height: 78px; height: 10px; overflow: hidden">
        <div style="padding:2px; overflow: auto; background-color: grey; border: 1px solid black">
            <span style="float: left; text-align: left" ng-bind="pane.title"></span><span style="float: right; text-align: right" ng-click="closeWindow(pane.objID)">X</span>
        </div>
        <div compile="pane.content" style="position: ablsolute; background-color: white; height: 10px; padding: 5px; border: 1px solid black; overflow: auto;"></div>
    </div>
</div>

因此，每当用户加载 View 时，html 都会进入 $scope.panes[].content。然后通过编译指令编译该 html。尝试单击我提供的链接中的图标。所发生的情况是，新内容被添加到 View 中，而原始内容(图标)仍然保留。我什至可以将多个 View 加载到同一 View ，每个 View 都具有不同的数据，并且正如窗口系统所预期的那样，所有 View 都保留在屏幕上。所有这一切都没有国家提供。现在我确定您的应用程序没有窗口化，我的观点是:

使用数组来存储所有数据，当返回view1时，从之前加载的数组中加载数据，而不是从数据库或其他任何地方重新加载。