angularjs - stateparams - ui-router: una ruta sin plantilla de vista
ui-router nested views (5)
¿Es posible configurar una ruta en ui-router que solo tenga un controlador? El propósito es que, en una determinada URL, lo único que me gustaría hacer es tomar medidas programáticamente y no mostrar nada en términos de vista. He leído los documentos, pero no estoy seguro si ofrecen una forma de hacerlo.
Sí, he leído esto: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state , pero Eso no es exactamente lo que estoy buscando.
Por ejemplo, digamos que tengo un cuerpo básico con vista:
<body ui-view></body>
Y algunas configuraciones básicas:
// Routes
$stateProvider
.state(''myaction'', {
url: "/go/myaction",
onEnter: function() {
console.log(''doing something'');
}
});
Cuando se visita /go/myaction , la vista está en blanco. ¿Es posible hacer esto?
De la documentación:
Advertencia: el controlador no se creará una instancia si la plantilla no está definida.
¿Por qué no usas una cadena vacía como plantilla para superar esto?
Mi solución para esto fue simplemente incluir una plantilla (archivo html) que está en blanco.
No puede tener un controlador sin una vista, pero puede usar onEnter lugar de un controlador. Si no desea cambiar la vista actual al acceder a este estado, puede definirlo como estado secundario:
$stateProvider
// the parent state with a template
.state(''home'', {
url: ''/home'',
templateUrl: ''/home.html'',
controller: ''HomeCtrl''
})
// child of the ''home'' state with no view
.state(''home.action'', {
url: ''/action'',
onEnter: function() {
alert(''Hi'');
},
});
Ahora en home.html puedes hacer algo como esto:
<a href ui-sref=".action">Greet me!</a>
Pude resolver este problema redirigiendo el estado sin cabeza en el que estaba tomando acción programática, a un estado CON una vista al final del estado sin cabeza:
$stateProvider
.state(''myaction'', {
url: "/go/myaction",
onEnter: function() {
console.log(''doing something'');
}
controller: function($state) {
$state.go(''home'');
}
});
Si tu puedes hacerlo. Use nombres de vista absolutos para reutilizar la <ui-view> de otro estado.
Echale un vistazo a éste ejemplo:
Los usuarios van a mi aplicación, pero dependiendo de si están autenticados o no, quiero enviarlos a una página pública o privada. Uso el estado del index únicamente para ver si están conectados o no, y luego los redirecciono a index.private o index.public .
Los estados secundarios utilizan nombres de vista absolutos para usar el elemento <ui-view> que corresponde al estado del index . De esta manera, no necesito hacer una segunda <ui-view> anidada.
$stateProvider.state(''index'', {
url: "/",
controller: ''IndexCtrl''
}).state(''index.private'', {
views: {
"@": {
templateUrl: ''private.html'',
controller: ''PrivateCtrl''
}
}
}).state(''index.public'', {
views: {
"@": {
templateUrl: ''public.html'',
controller: ''PublicCtrl''
}
}
});
Una pequeña nota en este ejemplo: Estoy usando el acceso directo @ aquí. Normalmente utilizarías viewname@statename .