Köşeli yönlendirici tüm durumlar için birden çok adlandırılmış görünümler

Question

Tüm durumlar için birden çok adlandırılmış görünüm yazmanın herhangi bir yolu olup olmadığını bilmek istiyorum, en iyi örnek, nav çubuğunun ve altbilgisinin tüm rotalarda görünmesini istediğimde en iyi örnektir. Ev devlet bu durumda çözülmeden önce nav ve altbilgi gösteren çünkü kullanmak istemiyorum

$stateProvider 
    .state('home',{ 
    views: { 
     'home': { 
     templateUrl: 'home.html', 
     controller: controller 
     }, 
     'nav': { 
     templateUrl: 'nav.html', 
     controller:controller 
     }, 
     'footer': { 
     templateUrl: 'footer.html', 
     controller: controller 
     }, 
    } 
    }) 

, ng-sayılabilir.

Answer 1

Evet, aslında Multiple Named Views'u nasıl yöneteceğinizle ilgili ui-router kılavuzunda yazabilirsiniz. İlk olarak, home.html gibi tüm içerik görünümlerinizi koyacağınız ve adsız görünümde (boş dize) koyduğunuz görünüm de dahil olmak üzere, soyut bir durum içinde belirli bir adlandırılmış görünümler kümesi tanımlamanız gerekir.

Farkettiğiniz gibi, aşağıdaki demo da soyut bir durum olan (bu durumda gezinemeyeceğiniz anlamına gelir) app adlı bir kök durumu gösterir. Üç görünüm vardır, her biri, index.html'da tanımlanan ui-view s değerine karşılık gelen bir adı temsil eder.

Adsız görünüm içinde, durumunun tüm alt öğelerini temsil edecek bir ui-view adı verilen content.html içerir. Bunu yaparak, app durumu altında bu durumları eklerseniz, tüm durumlarınıza nav.html ve footer.html paylaşabilirsiniz. Buna bir örnek, app.home ve app.items durumu olabilir. Bununla ilgili daha fazla bilgi edinmek için, yukarıda eklediğim bağlantıyı okuyun.

DEMO

JavaScript

$urlRouterProvider.otherwise('/home'); 

$stateProvider.state('app', { 
    abstract: true, 
    views: { 
    nav: { 
    templateUrl: 'nav.html', 
    controller: 'NavController as Nav' 
    }, 

    '': { 
    templateUrl: 'content.html', 
    controller: 'ContentController as Content' 
    }, 

    footer: { 
    templateUrl: 'footer.html', 
    controller: 'FooterController as Footer' 
    } 

    } 
}) 

.state('app.items', { 
    url: '/items', 
    templateUrl: 'items.html', 
    controller: 'ItemsController as Items' 
}) 

.state('app.home', { 
    url: '/home', 
    templateUrl: 'home.html', 
    controller: 'HomeController as Home' 
}); 

HTML

index.html

<ui-view name="nav"></ui-view> 
<ui-view></ui-view> 
<ui-view name="footer"></ui-view> 

content.html

<hr> 
<ui-view></ui-view> 
<hr> 

Answer 2

senin yollarının kalanı bağlı olarak muhtemelen abstract state kullanımı bunu yapabilirsiniz:

Angular UI Router - Views in an Inherited State da doğru yönde noktası yardımcı olabilir.