将AngularJS路由与单页Web应用程序配合使用

时间:2014-02-13 08:49:55

标签: angularjs web-applications angularjs-routing

我读到了angularJS routing。我想在我的网络应用程序中实现它,但不幸的是我现在有一个相当困难的情况改为路由我认为。这就是我的应用程序现在的工作方式(我知道它可能不是应该的方式,但确实有效):

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

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

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

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

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

并且names.php例如只有一些带有ng-repeat和其他angularJS指令的元素......我有很多这样的包含,并且它们只能用于ng-show操作。但是现在我抓住了一些AngularJS概念,我发现我犯了一个错误......

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

编辑:我去了this,我认为我可以解决这个问题:我需要一个类似于本例中的结构 2.1 Online Demo ,此外我需要能够在ng-view上点击一些应该打开另一个视图的东西(第一个应该留在原地)。知道怎么做到这一点吗?

2 个答案:

答案 0 :(得分:0)

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

但您可以考虑混合使用ng-viewng-include

比方说,我们点击菜单上的每个项目,ng-view更改子部分,您可以在子部分中使用ng-include,我们可以将其全部放在子部分中

尝试阅读ng-include

答案 1 :(得分:0)

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

如果您的查看要求很复杂,请查看支持各种组合的ui-router组件。