angularjs - sref - Angular UI-Router ¿Cómo crear un estado de "diseño"?
ui-router params (6)
Dado un archivo HTML como este:
<html>
<header ui-view="header"></header>
<div class="main" ui-view></div>
<footer ui-view="footer"></footer>
</html>
¿Cómo crear uno un estado de diseño que llene el "encabezado" con una plantilla de encabezado, el pie de página con una plantilla de pie de página y luego permitir que los estados secundarios rellenen la vista de interfaz de usuario vacía?
Supongo que el ui-view vacío también podría llamarse algo así como ui-view = "main".
Al igual que con el método de Jack.the.ripper, también podrías hacerlo de la forma que mejor me funcione.
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state(''root'', {
/* The Root State */
views: {
'''': {
abstract: true,
templateUrl: ''master.html'',
controller: ''mainController''
},
''header@root'': {
templateUrl: ''header.html'',
controller: ''headerController'',
},
''footer@root'': {
templateUrl: ''footer.html'',
controller: ''footerController''
},
},
})
.state(''root.index'', {
/* The Index State */
url: ''/'',
views: {
''content'': {
templateUrl: ''index.html'',
controller: ''indexController''
}
},
.state(''root.other'', {
/* The Other State */
url: ''/'',
views: {
''content'': {
templateUrl: ''other.html'',
controller: ''otherController''
}
},
});
});
En nuestro index.html solo tendremos una <ui-view></ui-view>
El master.html se verá como
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
El motivo por el que elegí este enfoque es que no tengo que crear un controlador global separado, y mi mainController será el controlador global.
Basándome en la respuesta de Jack.the.ripper, creé esta solución.
Casus: Tengo una ligera variación de que realmente quiero 2 diseños. Un público y otro privado. En Meteor with Blaze y Iron Router hubo una buena solución que simplemente podría definir qué plantilla maestra se utilizará para una ruta determinada. Esto lo he podido configurar gracias a Jack!
NOTA: El código estará en Jade and Coffee y es un proyecto Meteor + Angular. Utilice http://js2.coffee/ para convertir a Javascript.
# the ROUTER part
#
angular.module( ''myApp'' ).config(
( $urlRouterProvider, $stateProvider, $locationProvider ) ->
$locationProvider.html5Mode true
$stateProvider
.state( ''private'',
url: ''''
abstract: true
views:
''app'':
templateUrl: ''client/views/layouts/privateLayout.html''
)
.state( ''public'',
url: ''''
abstract: true
views:
''app'':
templateUrl: ''client/views/layouts/publicLayout.html''
)
.state( ''private.home'',
url: ''/''
views:
"container@private":
templateUrl: ''client/views/home/home.html''
)
.state( ''public.login'',
url: ''/login''
views:
"container@public":
templateUrl: ''client/views/session/login.html''
)
$urlRouterProvider.otherwise ''/''
)
Este es el archivo de índice donde se define la vista de la aplicación que utilizará el estado abstracto definido en el enrutador.
head
meta(name="viewport" content="width=device-width, initial-scale=1")
base(href="/")
body(layout="column")
div(ui-view="app" layout="column" flex)
A continuación, el diseño privado con su vista de contenedor.
div(layout="column" flex)
div(ng-controller="AppCtrl" layout="row" flex)
//- some private Layout stuff happening here....
md-content(flex layout-padding)
div(ui-view="container" layout="column")
y finalmente el diseño público con su vista de contenedor.
div.public-layout(layout="column" flex)
div(ui-view="container" layout="column" flex)
Con esta configuración, puedo configurar la página de inicio de sesión para utilizar el diseño público abstracto indicando en la vista de esta ruta que debe usar el contenedor de vistas @ public, es decir, desde la vista Pública, usar el contenedor de la vista. En esta vista cargue el login.html.
Lo mismo ocurre con la página de inicio, esta carga el contenedor @ privado, lo que significa la vista del contenedor de la vista privada.
Esto parece funcionar como un encanto.
Muchas gracias Jack, y también el autor de la respuesta en Angular UI Router - Nested States con varios diseños que me ayudaron a llegar a la solución final.
Aclamaciones
En lugar de utilizar rutas para el encabezado y el pie de página, usaría los componentes Angular ahora que están disponibles en 1.5x.
Es mucho más flexible y no tiene que lidiar con root.whatever o ngInclude. Entro en más detalle aquí: https://.com/a/41093339/2416007 , pero esencialmente tú:
1. Crear componente
(function () {
''use strict'';
angular
.module(''layout'')
.component(''layoutHeader'', {
templateUrl: ''layout/header.html'',
bindings: {},
controller: Controller
});
Controller.$inject = [];
function Controller() {
var ctrl = this;
initialize();
////////////////////
function initialize(){
}
}
}());
2. Agrégalo a tu página index.html o similar
<layout-header></layout-header>
3. Lo mismo para el pie de página.
<layout-footer></layout-footer>
4. El resultado en el cuerpo es.
<layout-header></layout-header>
<main ui-view></main>
<layout-footer></layout-footer>
En realidad, hay una manera muy fácil de hacer eso.
1. Crear un estado de diseño
$stateProvider
.state(''master'', {
abstract: true,
views: {
layout: {
templateUrl: ''/layouts/master.html'',
}
}
});
2. Utilice el estado de vista sin nombre dentro del diseño
<!-- layouts/master.html -->
<div ui-view></div>
3. Crear un estado de vista
$stateProvider
.state(''home'', {
url: ''/'',
templateUrl: ''/views/home.html'',
parent: ''master'',
});
4. Utilice el estado de diseño nombrado como estado raíz
<!-- home.html -->
<body ui-view="layout"></body>
Una forma es hacer un estado ''raíz'' global. Por lo tanto, cada estado será su hijo. Al igual que root.pages, root.pages.edit, root.settings, etc. Luego puede proporcionar plantillas predeterminadas para encabezado y pie de página.
Otra forma, enfoque diferente, que utilizo personalmente, es usar ng-include para encabezado y pie de página.
<body ng-controller="AppCtrl">
<div id="header" ng-include="''header.tpl.html''"></div>
<div class="main_container" ui-view>
</div>
</body>
Por cierto Yo uso un controlador separado en header.tpl.html, que es un elemento secundario de AppCtrl principal:
<div id="header" ng-controller="HeaderCtrl"> ....
intente esto, prácticamente su encabezado y pie de página son plantillas estáticas, pero puede agregar los controladores en caso de que necesite agregarle alguna funcionalidad dinámica, el encabezado y el pie de página se incluirán de manera predeterminada ya que la ruta es "", así que pruébelo :
app.config([''$stateProvider'', function($stateProvider){
$stateProvider
.state(''root'',{
url: '''',
abstract: true,
views: {
''header'': {
templateUrl: ''header.html'',
controller: ''HeaderCtrl''
},
''footer'':{
templateUrl: ''footer.html'',
controller: ''FooterCtrl''
}
}
})
.state(''root.home'', {
url: ''/'',
views: {
''container@'': {
templateUrl: ''homePage.html''
}
}
})
.state(''root.other'', {
url: ''/other'',
views: {
''container@'': {
templateUrl: ''other.html''
}
}
});
}]);
Editar: para mí, el mejor lugar para configurar las vistas debería estar en el index.html y algo como este código:
<header>
<div ui-view="header"></div>
</header>
<div ui-view="container">
</div>
<footer id="mainFooter" ui-view="footer">
</footer>