2014-02-13 56 views
0

路由我读到angularJS routing。我想在我的网络应用程序中实现它,但不幸的是,我认为现在转变为路由相当困难。这是我的应用程序是如何工作的,现在(我知道这可能不是应该的方式,但它的工作):使用AngularJS与单个页面的Web应用程序

我对整个应用程序一个控制器。 的观点是建立与一些div,其中之一是一个菜单股利。其他人是'部分'的意见,因为我猜想angularjs称他们。但我看到这里的问题是,我的两个局部视图可以在同一时间显示(页建成这个样子,局部视图只需要在页面的一部分本身)。

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

目前,我有一些div使用PHP中的谐音包括(这是我肯定走错了路)和div的对他们的NG-显示,这样就开始上什么都没有。然后我通过设置所有分支(视图)的ng-show参数来操作菜单中的所有点击。所以如果点击一个按钮,我隐藏所有其他按钮(使用ng-click和控制器内部的功能)。但这是单调乏味的工作,而不是角度,因此我在这里问这个问题。

我包括部分的示例(剥离所有不必要的CSS类等):

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

而且names.php有例如刚刚与NG-重复等angularJS指令有少数元素......我有很多包括就像那样,他们只用ng-show操作就能很好地工作。但现在,我掌握了一些的AngularJS概念,我知道我犯了一个错误......

综上所述:(?用NG-观点或许 - 不是必要的)我如何使用angularJS路线一起显示我的意见Web应用程序? (考虑到我上面描述的情况)。我只想让用户能够知道他在任何特定时刻的“页面部分”。

编辑:我去槽this,我想我可以工作了:我需要一个类似于在这个例子中2.1在线演示的结构,但此外我需要能够点击纳克的东西 - 这应该打开另一种观点(首先应该保持原样)。任何想法如何做到这一点?

回答

0

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

但是你可以考虑一下混合ng-viewng-include

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

尝试阅读ng-include

+0

hm尝试ng-include,但它创建新的$范围,从而产生比解决它似乎更多的问题? – trainoasis

+0

如果您有时间,请参阅我编辑的问题:) – trainoasis

+1

对不起,回答您可能会迟到。这是一个来自我的演示'Plunker',向您展示使用'ng-include'将子页面带入的方式,http://plnkr.co/edit/bvr6764VR3Iq8AUO1Urh?p=info – Howard

0

AngularJS具有ng-view,其中将包括当前上下文的主旋律,UI元素的其余部分都是由ng-include管理。路线也与nv-view同步工作。

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

+0

嗯,看起来相当复杂。 Ng-include创建了新的$范围,这让我有点困扰。我仍然不知道如何开始在我的应用程序中实现路由 – trainoasis

+0

如果您有时间,请参阅我已编辑的问题: – trainoasis

+0

在'ng-view'中呈现的部分内部,您始终可以添加默认隐藏的部分并根据点击显示。您可以使用ng-if或ng-show \ hide来执行此操作。 – Chandermani

相关问题