Angular ui router wiele nazwanych widoków dla wszystkich stanów

Question

Chcę wiedzieć, czy istnieje sposób, aby napisać wiele nazwanego widoku dla wszystkich stanów, najlepszym przykładem jest, gdy chcę, aby pasek nawigacji i stopka pojawiały się we wszystkich trasach.

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

nie chcę używać ng obejmują, bo nav i stopka jest wyświetlana przed państwem macierzystym jest rozwiązane w tym przypadku.

Answer 1

Tak, możesz, jest to napisane w instrukcji .

Najpierw należy zdefiniować określony zestaw nazwanych widoków w stanie abstrakcyjnym, w tym widok, w którym można umieścić wszystkie widoki treści, takie jak home.html i umieścić go w bezimiennym widoku (pusty ciąg).

Jak być może zauważyłeś, poniższe demo pokazuje stan root o nazwie app, który jest również stanem abstrakcyjnym (oznacza to, że nie możesz nawigować w tym stanie). Ma trzy widoki, każdy reprezentuje nazwę, która odpowiada ui-view s zdefiniowana w index.html.

W widoku bez nazwy zawiera content.html, który ma bezimienny ui-view, który będzie reprezentował wszystkie stany podrzędne stanu app. W ten sposób można udostępnić wartości nav.html i footer.html wszystkim swoim stanom, jeśli doda się te stany pod stanem app. Przykładem może być stan app.home i app.items. Aby dowiedzieć się więcej na ten temat, przeczytaj link dodany powyżej.

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

zależności od reszty swoich tras prawdopodobnie można skorzystać z abstract state to zrobić:

Angular UI Router - Views in an Inherited State może również pomóc skierować Cię w dobrym kierunku.