AngularJS birden çok şablonu bir sayfada

Question

Statik başlık menüsü sunan bir dizinim var ve bunun altında, rotayı temel alan bir ng görünümü, doğru şablonu seçiyor. Örneğin bu gibi:

<navbar> 
    ... 
</navbar> 
<div ng-view> 
</div> 

Her şey bir şablon ilgili denetim mekanizması ile bu kapta yüklenen, belirli bir rota çarpıldığında, bugüne kadar iyidir.

Şimdi ng görünümünde yüklü başka bir sayfa var ve url "/ dashboard" vurulduğunda tetikleniyor. Sorun, gösterge tablosu sayfasının, bazı yönlendirme mantığını (daha fazla veya daha az) içermesi gereken bir kenar çubuğu menüsüne sahip olmasıdır. Kenar çubuğu menüsünden bir link tıklandığında, sayfanın sadece sol tarafını yüklemem gerekiyor (tüm ng-view konteyneri değil).

1) o kenar çubuğu menü depolayan bir direktif oluşturun ve kenar çubuğu menüsünde tarafından işlenir sayfaların tümünde enjekte ==> yönlendirme hala Ng- tarafından işlenir: Ben iki çözüm belirledik

görünüm.

2) Kullanım ng-dahildir ve böyle tablosu sayfasında bazı yönlendirme mantığı vardır:

<a ng-click="templateType = 1">Template 1</a> 
<a ng-click="templateType = 2">Template 1</a> 

<div ng-if="templateType === 1" ng-include="template1" 
    ng-controller="Template1Controller"></div> 
<div ng-if="templateType === 2" ng-include="template2" 
    ng-controller="Template2Controller"></div> 

başka yaklaşım var mı? Ya da, bazı rotaları işleyen bir kenar çubuğunu ve başka bir yolu yöneten statik bir menüyü ele almanın en iyi yolu nedir, kenar çubuğu menüsünün yalnızca bazı rotalarda kullanılabilir.

Sorunumu daha iyi açıklayabileceğimi umarak, bir boya çizimi yaptım.

Answer 1

Sen UI-Router kullanmak ve iç içe görünümler bir atış verebilir. İşte bir really good tutorial. Ben dersin sonunda elde etmeye çalıştığını düşünüyorum.

Answer 2

Diğerlerinin önerdiği gibi, UI yönlendirici ve iç içe geçmiş görünümler için gitmeniz gerekir. Sayfa düzeninizi ayarlamak için harika bir yoldur.

Sen Angular UI-Router How to create a "layout" state?