Unifica gli URL di routing per le pagine indipendenti visualizzate all'interno di un iframe

Question

Ho alcune app (Applicazione singola pagina, indipendente) su angularjs. Hanno un diverso stile dell'interfaccia utente.

Ho dovuto creare una nuova app (indipendente) con pannello di navigazione nella parte sinistra della pagina e iframe nella parte destra della pagina.

Il pannello di navigazione in parte risolve il problema dello styling dell'interfaccia utente.

Iframe conterrà altre app indipendenti.

Iframe è un requirment applicazione principale

ho creato con la navigazione e iframe, sulla base di angularJs.

Come risultato, carichi principali app moduli indipendenti (SPA/AngularJs) di iframe e quei moduli funzionano bene.

Ma, c'è un "piccolo" problema. Ogni modulo indipendente ha il proprio percorso angularjs. Funziona, ma non viene visualizzato nella finestra principale (nell'app principale in cui si trova iframe)

È possibile unificare il percorso della finestra principale dell'applicazione e il percorso del percorso iframe.

Qualche idea?

Answer 1

ok ho trascorso un po 'di tempo per voi per proporre una soluzione di lavoro. Tuttavia, presuppone un certo livello di coerenza e controllo sulle vostre applicazioni angolari.

Primo passo è stato quello di aggiungere una semplice navigazione con link alla sezione del mio applciation sub angolare:

<nav> 
    <ul> 
     <li><a href="#/app1/main">App1</a></li> 
     <li><a href="#/app2/home">App2</a></li> 
    </ul> 
</nav> 

Nella stessa pagina padre ho anche aggiunto un iframe, come si richiede :)

<section> 
    <iframe src=""></iframe> 
</section> 

Con i seguenti script per gestire i cambiamenti di indirizzo nella finestra padre:

// Simple method to look for the second index of something 
String.prototype.secondIndexOf = function (val) { 
    var fst = this.indexOf(val); 
    var snd = this.indexOf(val, fst + 1) 
    return snd 
} 

// My goto method to basically go to somewhere in my angular apps 
function goto(app, route) { 
    $('iframe').attr('src', app + '/test.html#' + route) 
} 

// upon hash change of the parent page I will call my goto method if there is a hash 
$(window).on('hashchange', function() { 
    var hash = location.hash; 

    if (hash) { 
     var appName = hash.substring(hash.indexOf('app'), hash.indexOf('app') + 4); 
     var route = hash.substring(hash.secondIndexOf('/')); 
     goto(appName, route); 
    } 

}); 

// On initial page load I also like to trigger this hash change to 
// go to the right location initially 
$(window).trigger('hashchange'); 

Ovviamente questa sembra essere una soluzione a senso unico a meno che non si crei anche la modifica dell'URL all'indietro dalle applicazioni angolari secondarie alla finestra principale.

Al fine di raggiungere questo ho deciso di spingere i cambiamenti di hash indietro fino alla finestra padre dentro l'evento $ routeChangeStart di ogni applicazione:

così per esempio per un app1 sarebbe:

.run(["$rootScope", function ($rootScope) { 

    $rootScope.$on('$routeChangeStart', function(next, current) { 

    if (current.$$route){ 
     window.parent.location.hash = "#/app1" + current.$$route.originalPath; 
    } 

});