Унифицируйте URL-адреса маршрутизации для независимых страниц, созданных внутри iframe

У меня есть несколько приложений (одностраничное приложение, независимое) на angularjs. Они имеют различный стиль пользовательского интерфейса.

Мне нужно было создать новое приложение (независимое) с панелью навигации в левой части страницы и iframe в правой части страницы.

Панель навигации частично решает проблему унификации UI-стиля.

Iframe будет содержать другие независимые приложения.

Iframe - это requirment

Я создал основное приложение с навигацией и iframe, основанное на angularJs.

enter image description here

В результате основное приложение загружает независимые модули (SPA/AngularJs) с помощью iframe, и эти модули работают нормально.

Но есть "небольшая" проблема. Каждый независимый модуль имеет собственный угловой маршрут. Он работает, но не отображается в главном окне (в главном приложении, где находится iframe)

Можно ли унифицировать маршрут основного окна приложения и маршрут маршрута iframe.

Любые идеи?

ОТВЕТЫ

Ответ 1

ok Я потратил немного времени на то, чтобы вы предложили рабочее решение. Однако он предполагает определенный уровень согласованности и контроля над вашими приложениями angular.

Шаг первый состоял в том, чтобы просто добавить навигацию со ссылками на раздел моего вспомогательного приложения angular:

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

На той же родительской странице я также добавил iframe, поскольку вы требуем:)

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

С помощью следующих скриптов для обработки изменений адреса в родительском окне:

// 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');

Очевидно, что это, по-видимому, одностороннее решение, если мы также не создадим обратную модификацию url из дочерних angular приложений обратно в родительское окно.

Чтобы достичь этого, я решил подтолкнуть изменения хэша к родительскому окну внутри события $routeChangeStart для каждого приложения:

так, например, для app1 это будет:

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

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

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

});