2014-02-13 52 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

相關問題