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