substate - ui router angularjs template
Enrutador angular UI: estados anidados con diseños múltiples (1)
Quiero tener varios diseños (1-col, 2-col, 3-col) que quiero cambiar para diferentes rutas en función del diseño necesario.
Actualmente tengo un estado de raíz que se predetermina a usar un diseño determinado y luego dentro de ese diseño contiene directivas ui-view nombradas para secciones como el encabezado, pie de página, barra lateral, etc.
Me preguntaba si es posible cambiar el diseño de los estados anidados, ya que actualmente no funciona y no aparecen errores dentro de la consola o linter.
Actualmente no obtengo ningún resultado en el navegador, lo que me hace pensar que he implementado el enfoque incorrectamente, ya que todas las rutas no heredan del estado de la ruta.
Aquí está el código:
My-module.js
''use strict'';
angular.module(''my-module'', [''ngResource'', ''ui.router''])
// Routing for the app.
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state(''root'', {
url: '''',
views: {
''layout'': {
templateUrl: ''partials/layout/1-column.html''
},
''header'': {
templateUrl: ''partials/layout/sections/header.html''
},
''footer'': {
templateUrl: ''partials/layout/sections/footer.html''
}
}
})
.state(''root.home'', {
url: ''/''
})
.state(''root.signup'', {
url: ''/signup'',
views: {
''step-breadcrumb'': {
templateUrl: ''partials/signup/step-breadcrumb.html''
}
}
})
;
$urlRouterProvider.otherwise(''/'');
})
;
Index.html
<!doctype html>
<html class="no-js" ng-app="my-module">
<head>
<meta charset="utf-8">
<title>My Test App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<div ui-view="layout">
</div>
<!-- build:js({app,.tmp}) scripts/vendor.js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbuild -->
<script src="scripts/config.js"></script>
<!-- build:js({app,.tmp}) scripts/main.js -->
<script src="scripts/my-module.js"></script>
<!-- inject:partials -->
<!-- endinject -->
<!-- endbuild -->
</body>
</html>
1-column.html
<div class="one-column">
<!-- page header -->
<div ui-view="header">
</div>
<!-- / page header -->
<!-- state breadcrumb (optional) -->
<div ui-view="step-breadcrumb">
</div>
<!-- / state breadcrumb -->
<!-- page-container -->
<div class="page-container">
<!-- main content -->
<div ui-view="main-content">
</div>
<!-- / main content -->
</div>
<!-- / page-container -->
<!-- page footer -->
<div ui-view="footer">
</div>
<!-- / page footer -->
</div>
Apreciar la ayuda
Si bien no hay ningún plunker que muestre tu ejemplo, voy a compartir uno contigo: ejemplo de diseño de trabajo . Por favor, obsérvala para ver en acción lo que trataré de explicar aquí
Si nuestro estado de root debe ser el único estado raíz, inyectado en index.html , necesitamos una definición un poco diferente:
Entonces para index.html
// index.html
<body>
<div ui-view="layout">
</div>
</body>
necesitaríamos esta sintaxis:
$stateProvider
.state(''root'', {
url: '''',
views: {
''layout'': {
templateUrl: ''partials/layout/1-column.html''
},
''header@root'': {
templateUrl: ''partials/layout/sections/header.html''
},
''footer@root'': {
templateUrl: ''partials/layout/sections/footer.html''
}
}
})
¿Qué es esto: ''header@root'' ? es un nombre absoluto. Verifíquelo aquí:
- Ver nombres - Nombres relativos vs. absolutos (cita pequeña a continuación)
- y aquí traté de ampliar eso en detalle
Detrás de escena, a cada vista se le asigna un nombre absoluto que sigue un esquema de
''viewname@statename'', donde viewname es el nombre utilizado en la directiva view y el nombre de estado es el nombre absoluto del estado, por ejemplo, contact.item. También puede optar por escribir sus nombres de vista en la sintaxis absoluta.
Lo mismo aplica para otras definiciones de estados. Debido a que ''root.signup'' tiene padre directo ''root'', la sintaxis existente estaría funcionando
.state(''root.signup'', {
url: ''/signup'',
views: {
''step-breadcrumb'': { // working AS IS
...
Pero podríamos usar nombres absolutos y también funcionaría
.state(''root.signup'', {
url: ''/signup'',
views: {
''step-breadcrumb@root'': { // absolute naming
...
porque así es como funciona detrás de todos modos.
Por favor, observe el ejemplo de diseño para más detalles