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

What is the best way to load partial views in SPA and Angular JS

本文关键字：视图 最佳 方式 是什么 加载局 SPA Angular JS      更新时间：2023-09-26

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

我们能不能有一个占位符，让元素根据一些输入加载这个特定的视图？

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

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

2） 需要有"n"个ng includes，用于设置标志的true或false并更改视图。

3） ng-带有一组语句的开关，并要求开关根据值加载相应的视图

4） 国家提供商：https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-查看

5） 根据条件决定加载哪个视图的自定义指令

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

任何建议都会有所帮助。

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

这是一个单页应用程序，我使用的是一条单一的路线。现在，页面上的图标不是通常可以找到菜单的标题的一部分，它们实际上是视图的一部分。我使用主视图，其中所有视图都加载到数组$scope.panese[]中。然后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.panese[].content。然后通过compile指令编译该html。尝试单击我提供的链接中的图标。结果是，新内容被添加到视图中，而原始内容，即图标，仍然保留。我甚至可以将多个视图加载到同一个视图，每个视图都有不同的数据，正如预期的那样，使用窗口系统，所有视图都会保留在屏幕上。所有这些都没有状态提供程序。现在我确信你的应用程序没有窗口，我的观点是：

使用数组存储所有数据，当返回view1时，从以前加载的数组加载数据，而不是从数据库或任何位置重新加载。

相关文章：