Angular UI-Router mehrere Ansichten

Question

Ich benutze angular UI-Router. Ich habe nach dem in meiner Route Config

.config(function config($stateProvider) { 
    $stateProvider.state('newsFeedView', { 
     url: '/newsFeed', 
     controller: 'newsFeedController', 
     templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html', 
     data: { 
     pageTitle: 'News Feed' 
     } 
    }) 
    .state('tradeFeedView', { 
     url: '/tradeFeed', 
     controller: 'tradeFeedController', 
     templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html', 
     data: { 
     pageTitle: 'Trade Feed' 
     } 
    }) 
    .state('bulletinBoard', { 
     url: '/bulletinBoard', 
     views: { 
     'tradeFeed': { 
      url: "", 
      controller: 'tradeFeedController', 
      templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html' 
     }, 
     'newsFeed': { 
      url: "", 
      controller: 'newsFeedController', 
      templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html' 
     } 
     }, 
     templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html' 
    }); 
}) 

In meiner Index-Seite Ich rufe nur die Ansicht mit:

<div class="container" ui-view></div> 

In My bulletinBoard.html i eine verschachtelte Ansicht haben wollen:

<div ui-view="tradeFeed"></div> 
<div ui-view="newsFeed"></div> 

Für die/newsFeed Seite und die/tradeFeed Seiten funktioniert das perfekt, aber für das Bulletin Board kann ich nichts auf der Seite sehen. Wo gehe ich falsch?

Answer 1

Ich finde das Beispiel auf dem offiziellen GitHub Wiki als sehr unintuitiv. Hier ist eine bessere:

https://scotch.io/tutorials/angular-routing-using-ui-router

Zum Beispiel:

... 

.state('bulletinBoard', { 
    url: '/bulletinBoard', 
    views: { 

     // the main template will be placed here (relatively named) 
     '': { templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html' }, 

     // the child views will be defined here (absolutely named) 
     'tradeFeed@bulletinBoard': { template: ..... }, 

     // another child view 
     'newsFeed@bulletinBoard': { 
      templateUrl: ...... 
     } 
    } 

}); 

Die Syntax der einzelnen Attribute Ansicht viewName@stateName sein.

Answer 2

Die .state() Methode templateUrl wird ignoriert, wenn das Objekt views verwendet wird. Sehen Sie das ui-Router Wiki für weitere Informationen: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#user-content-views-override-states-template-properties