Unify the routing Urls for independent pages rendered inside an iframe

ok I spent a little time for you to propose a working solution. However it presupposes a certain level of consistency and control over your angular applications.

Step one was to simple add a navigation with links to section of my sub angular applciation:

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

On the same parent page I also added an iframe as you require :)

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

With the following scripts to handle the address changes in the parent window:

// Simple method to look for the second index of somethingString.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 appsfunction 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');

Obviously this seems to be a one way solution unless we also create backwards url modification from child angular applications back up to the parent window.

In order to achieve this I decided to push the hash changes back up to the parent window inside the $routeChangeStart event of each application:

so for example for an app1 it would be:

.run(["$rootScope", function ($rootScope) {    $rootScope.$on('$routeChangeStart', function(next, current) {    if (current.$$route){        window.parent.location.hash = "#/app1" + current.$$route.originalPath;    }});