angularjs - bootstrap - Inicializa datos solo una vez con ui-router y md-tabs

calendario angular js

Question

Estoy usando ui-router con las pestañas de Material Design para cargar contenido de pestañas dinámicamente en ngGrid .

Cada vista tiene su controlador por separado con un servicio que solicita los datos. ¿Alguna idea sobre cómo puedo configurar el enrutador ui para inicializar los datos solo una vez para cada pestaña ?

Actualmente, cada vez que hago clic en una pestaña, se lanza una nueva solicitud y se reinicia ngGrid.

archivo de configuración ng-router, por si acaso:

 $stateProvider
.state(''tab1'', {
url: ''/tab1'',
views: {
''tab1'': {
templateUrl: ''tab1.html'',
controller: ''tab1Controller''
}
}
})
.state(''tab2'', {
url: ''/tab2'',
views: {
''tab2'': {
templateUrl: ''tab2.html'',
controller: ''tab2Controller''
}
}
})
.state(''tab3'', {
url: ''/tab3'',
views: {
''tab3'': {
templateUrl: ''tab3.html'',
controller: ''tab3Controller''
}
}
});

Answer 1

ACTUALIZADO

En caso de que los datos sean diferentes para cada pestaña, tenemos opciones.

• usar herencia (ver herencia),
• usar servicios

El primer caso significará que todos los estados tienen el mismo padre. Este padre declara Model = {} . Cada subestado puede acceder más tarde a este Modelo y agregar o usar los datos

var data = Model.DataForTab1;
if(!data){
data = loadData();
Model.DataForTab1 = data;
}

la próxima vez, llegamos a esta pestaña, podemos reutilizar los datos existentes, en el Model datos padre referenciado $

El segundo enfoque es usar el almacenamiento en caché dentro de un services especial para cada carga de datos. Tal servicio tendría casi la misma lógica (devolver datos cargados en caché o cargarlos)

¿Diferencia? Los servicios tendrán una vida útil más larga (a través de toda la aplicación) . El padre de las pestañas mantendrá los datos SOLO hasta que vayamos a otro estado principal.

Parte ORIGINAL

Si los datos son los mismos en todos los estados, la forma más adecuada (diría) de UI-Router es

• introducir un estado parent común,
• use resolve en ese padre (se ejecutará solo una vez)
• heredar de ella, todos los niños pueden obtener esos datos:

Verifique esta Q & A

// virtual parent ''root''
$stateProvider
.state(''root'', {
abstract: true,
template: ''<div ui-view></div>'',
resolve: {objectX : function() { return {x : ''x'', y : ''y''};}},
controller: ''rootController'',
})
// each state will declare parent state
// but its name and url is not effected
.state(''tab1'', {
parent: "root",
url: ''/tab1'',

Ver más aquí y el plunker de trabajo