将 AngularJS 路由与单页 Web 应用程序一起使用



我读过关于angularJS路由的文章。我想在我的 Web 应用程序中实现它,但不幸的是,我认为我现在更改为路由的情况相当困难。这就是我的应用程序现在的工作方式(我知道这可能不是它应该的方式,但它确实有效):

我有一个用于整个应用程序的控制器。 该视图由一些div 构建,其中一个是菜单div。其他是"部分"观点,我猜angularjs称之为它们。但是我在这里看到的问题是我的两个部分视图可以同时显示(页面是这样构建的,部分视图只占用页面的一部分)。

所以我正在做的是:我单击菜单上的按钮 ->显示一个部分视图(ng-show),然后我可以单击此部分视图上的某些内容以在同一页面上打开第二个部分视图(菜单和第一个部分必须保持原样)。

目前,我在带有php include的一些div中包含部分(我确定这是错误的方式),并且div上有ng-show,因此开头没有显示任何内容。然后,我通过设置所有部分(视图)的 ng-show 参数来操作菜单中的所有点击。因此,如果单击一个按钮,我会隐藏所有其他按钮(使用 ng-click 和控制器内部的功能)。但这是繁琐的工作,而不是 angularJS 的方式,这就是我在这里问这个问题的原因。

我包含的部分示例(去除了所有不必要的 css 类等):

<div ng-show="showNames">
<?php include_once("views/AREA1/names.php") ?>  
</div>

例如,名称.php只有一些带有 ng-repeat 和其他 angularJS 指令的元素......我有很多这样的包含,它们与 ng-show 操作配合得很好。但是现在我掌握了一些 AngularJS 概念,我发现我犯了一个错误......

总结一下:如何使用angularJS路由(也许使用ng-view?-不需要)在我的Web应用程序中显示视图?(考虑到我上面描述的情况)。我只是希望用户能够在任何给定时刻知道他在"页面的一部分"上。

编辑:我经历了这个,我认为我可以解决它:我需要一个类似于此示例2.1 在线演示中的结构,但此外,我需要能够在 ng-view 上单击应该打开另一个视图的内容(第一个应该保持原位)。知道如何做到这一点吗?

通过在AngularJS中使用routing功能,ng-view的html内容将被新的部分完全取代。不应将ng-view用于诸如同时显示多个部分之类的目的。

但是您可以考虑混合ng-viewng-include.

比方说,我们单击菜单上的每个项目,ng-view更改子部分,您可以在子部分中ng-include,我们可以在这里像子部分一样

。尝试阅读 ng-include

AngularJS有ng-view包含当前上下文的主题,其余的UI元素都由ng-include管理。路由也与nv-view同步工作。

如果您的视图要求很复杂,请查看支持各种组合的 ui 路由器组件。

相关内容

最新更新