2015-05-04 20 views
6

Tamam açımdan yeni duyuyorum, sadece ngRoute ve ngView direktifleriyle çalışmaya başladım, benim için bir sorun olan bir şeye rastladım ama şüpheliyim ki sadece benim için bir sorun değil. angluar'da expereince.Angularjs in anasayfa için çoklu ng-görünümleri

benim index.html sayfasında aşağıdaki işaretlemeyi (basitleştirilmiş) sahiptir:

<html> 
    <head> 
    <title>Sample APP</title> 
    </head> 
    <body> 
    <div class="header"> 
     <nav class="pull-right">...</nav> 
    </div> 

    <div class="main" ng-view> 
    </div> 

    <div class="footer"> 
    </div> 
    </body> 
</html> 

yukarıda sayfam kullanan varsayılan düzeni yapıdır. Şimdi benim sorun sadece ana sayfa için, "başlık" ile div içinde bir sürgü gösterilir. Bunun gibi:

<div class="header"> 
    <nav class="pull-right">...</nav> 
    <div class="slider">...</div> 
<div> 

Şimdi bu yalnızca ana sayfa içindir, bu yüzden bunu nasıl uygulayacağınız konusunda tamamen kafam karışmış olur. İndeks sayfamda iki ng görünümü yönergelerine ihtiyacım var mı? örneğin: i şimdi ben şablonuna angularjs bütünleştirmek çalışıyorum, çevrimiçi bir html şablonu satın çünkü Ayrıca ben bu şekilde yapıyorum Neden bilmek gerekiyorsa

<html> 
    <head> 
    <title>Sample APP</title> 
    </head> 
    <body> 
    <div class="header"> 
     <nav class="pull-right">...</nav> 
     <div class="slider" ng-view>...</div> 
    </div> 

    <div class="main" ng-view> 
    </div> 

    <div class="footer"> 
    </div> 
    </body> 
</html> 

, bu basitçe.

cevap

5

Tek bir sayfada yalnızca tek bir ng-view olur. Birden çok ng-view olması mümkün değildir. Başka kısmi yüklemek istiyorsanız, o zaman ng-include yönergesini kullanmanız gerekir.

Ui-router En iyi seçenek, birbirinin içine yerleştirilebilen çoklu görünümleri desteklemiş, yuvalanmış görünümlerin avantajlarından yararlanabilirsiniz.

Sen, bu özellik ng-route

Sana url üzerinde büyük kontrole sahip olduğu, ui-route için ng-route geçişe etmenizi tavsiye ediyorum yılında desteklemediği oysa sorgu biçiminde url: '/test?oneParam&twoParam' gibi Açısal UI yönlendiriciidekilerle burada params olabilir templates & states

+0

Tüm bunlarla karıştırılmam, şu anki sayfa/rota/durumun evde olup olmadığını kontrol et ve kaydırıcıyı benim görüşüme enjekte et. – user3718908

+1

'State', 'params', 'gibi' state.current.name 'isminin yapılacağı gibi tüm bilgileri içeren' $ state' hizmetini kullanarak mevcut duruma eri stateebilirsiniz. '$ state.params', –

+0

değerleri ile rotada mevcut olan bir parametre koleksiyonunu içerecektir. Bu yüzden bu kodu benim denetleyicimin içine koydum ama sonra kayan şablon ana sayfama nasıl yüklenir? – user3718908

3

Yalnızca bir tane ng-view'a sahip olabilirsiniz. Bununla birlikte, içeriğinin çeşitli yollarla değiştirilmesi mümkündür: ng-include, ng-switch veya farklı denetleyicileri ve şablonları routeProvider üzerinden eşlemek.

Ayrıca, birden çok paralel görünüme izin veren ui-router'u da kullanabilirsiniz. Bir example of multiple views using ui-router.

+0

Bu çok fazla bir şey isteyebilir, ancak yeni olduğum için elde etmek istediğim şeyin bir örneğini alabilir miyim? – user3718908

+1

@ user3718908 sadece sizin için bir örnek ekledi. –