javascript - example - ui-router angular 6

Enrutador de IU angular: vistas en un estado heredado

Question

Edición: Según la respuesta de @ actor2019, quiero actualizar mi pregunta para explicar mejor el problema:

Al usar Angular UI-Router (v0.0.2), configuré la aplicación para navegar correctamente entre "páginas" / estado principales, mientras heredaba el estado base.

Index.html:

<div ui-view></div>

base.html:

<!-- Header -->
<div>
<!-- Header markup -->
<!-- Search View -->
<div ui-view="search"></div>
</div>
<!-- Page Content view -->
<div ui-view></div>

El problema está aquí en el archivo app.js. Cuando agrego el parámetro de views al estado base , todo deja de funcionar (página en blanco al 100%). Sin ese parámetro, la página se procesa correctamente, pero no tengo una vista de búsqueda.

app.js:

$urlRouterProvider.otherwise(''/'');
//
// Now set up the states
$stateProvider
.state(''base'', {
abstract: true,
templateUrl: ''views/base.html'',
views: {
"search": {
templateUrl: "views/search.html"
}
}
})
.state(''base.home'', {
url: "/",
templateUrl: "views/home.html"
})
.state(''base.page2'', {
url: "/page2",
templateUrl: "views/page2.html"
});

¿Cómo agrego vistas a este estado ''base'' padre?

ACTUALIZACIÓN: El problema con la respuesta de @ actor2019 here es que la vista de search se reinicializa cuando cambia el estado. Me gustaría que las vistas desde el nivel base persistan a través de los cambios de estado.

Answer 1

El primer error obvio:

No puede especificar el controlador y la plantilla en el estado mientras utiliza las vistas. Son mutuamente excluyentes ...

Esto se debe a que cuando no hay "vistas" sino un controlador y una plantilla en el estado, UI-Router crea automáticamente la propiedad "vistas" y lleva esas propiedades a una vista "vacía" ...

.state(''base'', {
abstract: true,
templateUrl: ''views/base.html'', //Can''t do this
views: { // when this is there.
"search": {
templateUrl: "views/search.html"
}
}
})

En su lugar haz:

.state(''base'', {
abstract: true,
views: {
"": {
templateUrl: ''views/base.html''
},
"search": {
templateUrl: "views/search.html"
}
}
})

Segundo problema:

El hecho de que la orientación de las vistas funcione con vistas anidadas, etc. no es muy lógico, puede funcionar bien si se restringe a una vista en una sola vista hacia abajo, pero en las que comienza a trabajar con múltiples vistas con nombre, todo se vuelve confuso ... Agrega vistas sin nombre en la parte superior y muchas personas se pierden ...

La forma en que funcionan las vistas en UI-Router es la peor parte de UI-Router ...

Teniendo en cuenta su ejemplo, ni siquiera estoy completamente seguro de la forma de orientar la vista de búsqueda desde su estado padre abstracto ... Podría ser:

.state(''base'', {
abstract: true,
views: {
"": {
templateUrl: ''views/base.html''
},
"search@base": {
templateUrl: "views/search.html"
}
}
})

Si incluso se puede hacer que funcione ... Alternativamente, puede mover la vista de búsqueda fuera de base.html, pero supongo que la agregó ahí por una razón.

Todo el concepto de vista es la razón principal por la que terminé escribiendo https://github.com/dotJEM/angular-routing lugar.

Answer 2

De acuerdo con la documentation ui-router, cuando la aplicación se encuentra en un estado particular, cuando un estado está "activo", todos sus estados ancestrales también están implícitamente activos. Así, por ejemplo, cuando el estado "contacts.list" está activo, el estado "contacts" también está implícitamente activo, porque es el estado principal de "contacts.list". Los estados secundarios cargarán sus plantillas en la vista ui de sus padres. Recomiendo revisar la sección de su documentation titulada Nested States & Views para obtener una comprensión más completa de cómo hacerlo.

En el código que nos ha proporcionado aquí, el estado principal de la plantilla de búsqueda está en home , mientras que

.state(''header.search'', {
templateUrl: "views/search.html",
controller: "SearchCtrl"
})

implica que el estado principal de la plantilla de búsqueda debe ser header para que la vista se cargue correctamente. Por lo tanto, creo que los siguientes cambios en su app.js solucionarán su problema.

app.js

$stateProvider
.state(''home'', {
url: "/",
views: {
'''': {
templateUrl: "views/mainContent.html",
controller: "MainCtrl"
},
''header'': {
templateUrl: "views/header.html"
},
''footer'': {
templateUrl: "views/footer.html"
},
}
})
.state(''home.search'', {
views: {
''search'': {
templateUrl: "views/search.html",
controller: "SearchCtrl"
}
})
.state(''anotherPage'', {
url: "/anotherPage",
templateUrl: "views/anotherPage.html"
});

Answer 3

El estado home.search debe ser home.search lugar de header.search . En su caso, es posible que desee escribir algún estado abstract para mantener el diseño,

base.html

<div class="row-fluid">
<div class="header">
<div class="span3" ui-view="logo"></div>
<div class="span9" ui-view="menu"></div>
</div>
</div>
<div class="row-fluid">
<div class="content">
<div class="span2" ui-view="sidebar"></div>
<div class="span10" ui-view="entry"></div>
</div>
</div>

en app.js

$stateProvider
.state(''base'',{
abstract:true,
url:''/'',
templateUrl: viewBase+''base.html''
})
.state(''base.main'',{
url:'''',
views:{
"logo":{
templateUrl:viewBase+''main/logo.html''
},
"menu":{
templateUrl:viewBase+''main/menu.html''
},
"sidebar":{
templateUrl:viewBase+''main/sidebar.html''
},
"entry":{
templateUrl: viewBase+''main/entry.html''
}
}})

Answer 4

Esto funciona para mi

$stateProvider
.state(''base'', {
abstract: true,
url:''/'',
templateUrl: ''views/base.html''
})
.state(''base.home'', {
url: "",
views: {
"search@base": {
templateUrl: "views/searchOfHome.html"
}
//content@base, contentOfHome.html
}
})
.state(''base.page2'', {
url: "page2",
views: {
"search@base": {
templateUrl: "views/searchOfPage2.html"
}
//content@base, contentOfPage2.html
});

Si ''base'' es el estado raíz, no necesita el ''@base''