在 SPA 和 Angular JS 中加载部分视图的最佳方法是什么

Question

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

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

对根据逻辑加载部分视图（第二部分）的方式感到困惑。

1) Angular Route -- 它可能无法正常工作，因为我试图加载部分视图而不是整个视图

2) 需要有 'n' 个 ng-includes 来设置标志的真假并更改视图。

3) ng- switch 与一组语句，并要求 switch 根据值加载相应的视图

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

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

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

任何建议都会有所帮助。

Answer 1

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

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

<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>

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

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