di routing indipendente per più regioni in una AngularJS un'applicazione singola pagina

ho una sola pagina di applicazione AngularJS con quattro regioni, ognuna con il proprio contenuto:di routing indipendente per più regioni in una AngularJS un'applicazione singola pagina

Page Layout

ho bisogno ogni regione di comunicare tramite i servizi, ma per il resto hanno bisogno di avere un proprio instradamento indipendente a scopo di visualizzazione, ovvero dovrebbero avere ciascuno il proprio stato di visualizzazione.

Ho cercato di farlo (plunkr) con angular-ui-router ma non riesco a capire come creare stati angolari-ui che interessano solo un particolare modulo o regione, senza modificare il resto delle regioni sulla pagina.

La pagina contiene le limitata:

<body> 
    <a ui-sref="initial1">Initial Region 1</a><br/> 
    <a ui-sref="initial2">Initial Region 2</a> 

    <div ui-view="region1" class="region1"></div> 
    <div ui-view="region2" class="region2"></div> 
</body>

e l'applicazione tentativi di definire ciascuna regione in un modulo indipendente:

var app = angular.module('Main', ['ui.router', 'Region1', 'Region2']); 

var region1App = angular.module('Region1', []); 

region1App.config(function($urlRouterProvider, $stateProvider) { 
    $urlRouterProvider.otherwise("/"); 
    $stateProvider 
    .state('initial1', { 
     url: '/', 
     views: { 
     '[email protected]': { 
      template: 'Initial Region 1 State, go to <a ui-sref="second1">Second State</a>' 
     } 
     } 
    }) 
    .state('second1', { 
     url: '/', 
     views: { 
     '[email protected]': { 
      template: 'Second Region 1 State, go to <a ui-sref="initial1">Initial State</a>' 
     } 
     } 
    }); 
}); 

var region2App = angular.module('Region2', []); 

region2App.config(function($urlRouterProvider, $stateProvider) { 
    $urlRouterProvider.otherwise("/"); 
    $stateProvider 
    .state('initial2', { 
     url: '/', 
     views: { 
     '[email protected]': { 
      template: 'Initial Region 2 State, go to <a ui-sref="second2">Second State</a>' 
     } 
     } 
    }) 
    .state('second2', { 
     url: '/', 
     views: { 
     '[email protected]': { 
      template: 'Second Region 2 State, go to <a ui-sref="initial2">Initial State</a>' 
     } 
     } 
    }); 
});

Ciascun modulo deve avere il proprio stato "iniziale" e "seconda "stato, ed entrambi dovrebbero apparire sullo schermo allo stesso tempo, e cambiare lo stato di uno non dovrebbe influenzare l'altro. Se questo non può essere fatto con angular-ui-router, qual è il modo migliore per farlo con Angular?

fonte

2014-09-26 Raman

È possibile utilizzare UI-Router Extras - sticky states per raggiungere il proprio obiettivo.

Si desidera uno denominato <div ui-view='name'></div> per ciascuna regione. Quindi, aggiungere sticky: true alla definizione di stato che ha come target la vista denominata della regione.

<div ui-view="region1"></div> 
<div ui-view="region2"></div> 
<div ui-view="region3"></div> 
<div ui-view="region4"></div> 


.state('state1', { 
    sticky: true, 
    views: { region1: { templateUrl: 'foo.html', controller: barCtrl } } 
} 
.state('state2', { 
    sticky: true, 
    views: { region2: { templateUrl: 'foo2.html', controller: bar2Ctrl } } 
} 
.state('state3', { 
    sticky: true, 
    views: { region3: { templateUrl: 'foo3.html', controller: bar3Ctrl } } 
} 
.state('state4', { 
    sticky: true, 
    views: { region4: { templateUrl: 'foo4.html', controller: bar4Ctrl } } 
}

C'è un demo puoi vedere che mostra come funziona. Nota: la demo utilizza schede e mostra/nasconde le visualizzazioni ui di conseguenza. Il tuo caso d'uso non ha bisogno di mostrare/nascondere ogni vista con nome.

Controlla il demo source code per ulteriori informazioni.

fonte

2014-09-28 16:07:00

Ah, bene, ci provo. Mi piace questa soluzione meglio di avere due app separate. – Raman

@Raman vorrete sicuramente verificarlo. Dopo non aver trovato questa domanda ho postato [il mio] (http://stackoverflow.com/a/26126797/1294804) in cui Chris ha rilasciato un fantastico [collegamento plunk] (http://plnkr.co/edit/nc5ebdDonDfxc1PjwEHp?p = anteprima) che dimostra perfettamente il nostro caso d'uso. – cazzer

Grazie, gli stati appiccicosi hanno funzionato perfettamente. Bel lavoro. Risposta accettata – Raman

Ho creato un separate angular app for each region. La comunicazione tra le applicazioni avviene tramite l'ottenimento di un riferimento all'ambito pertinente tramite l'elemento app nel DOM e l'invio di un evento tramite angular.element(document.getElementById('RegionX_App')).scope().$emit come shown here.

AGGIORNAMENTO: Ho finito per utilizzare gli stati appiccicosi in UI-Router Extra come descritto in the answer da Chris T, e ha funzionato perfettamente.

fonte

2014-09-26 23:13:54 Raman

di routing indipendente per più regioni in una AngularJS un'applicazione singola pagina

risposta

Problemi correlati