angularjs - start - ui-router params

Angular UI-Router múltiples vistas

Question

Estoy usando UI-Router angular. Tengo lo siguiente en mi configuración de ruta

.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''
    });
})

En mi página de índice solo invoco la vista usando:

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

En My bulletinBoard.html quiero tener una vista anidada:

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

Para la página / newsFeed y las páginas / tradeFeed esto funciona perfectamente, pero para el tablero de anuncios no puedo ver nada en la página. ¿A dónde me voy mal?

Answer 1

El ejemplo en la wiki oficial de GitHub me parece muy poco intuitivo. Aquí hay una mejor:

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

Por ejemplo:

...

.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: ......
        }
    }

});

La sintaxis de cada atributo de vista es viewName@stateName .

Answer 2

La templateUrl del método .state() se ignora cuando se usa el objeto de views . Consulte la wiki de ui-router para más información: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#user-content-views-override-states-template-properties