Niezależny routingu dla wielu regionów w angularjs jednej aplikacji widoku

Mam pojedynczą stronę angularjs aplikacji z czterech regionów, każdy z własnym treści:Niezależny routingu dla wielu regionów w angularjs jednej aplikacji widoku

Page Layout

muszę każdy region do komunikowania się za pośrednictwem usług, ale poza tym muszą mieć własne niezależne trasy dla celów widoku, tzn. każdy powinien mieć swój własny stan widoku.

Próbowałem to zrobić (plunkr) z angular-ui-router, ale nie mogę wymyślić, jak utworzyć stany kątowe, które dotyczą tylko określonego modułu lub regionu, bez modyfikowania reszty regionów na stronie.

Strona zawiera Regionów

<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>

a aplikacja prób definiują każdy region w niezależnym module:

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

Każdy moduł powinien mieć swój własny „początkowy” stan i „drugie "stan, a oba powinny pokazywać się na ekranie w tym samym czasie, a zmiana stanu jednego nie powinna wpływać na drugi. Jeśli nie można tego zrobić za pomocą kątowego routera, jaki jest najlepszy sposób na zrobienie tego z Angular?

Źródło

2014-09-26 Raman

Możesz użyć UI-Router Extras - sticky states, aby osiągnąć swój cel.

Będziesz potrzebował jednego o nazwie <div ui-view='name'></div> dla każdego regionu. Następnie dodaj sticky: true do definicji stanu, która jest skierowana na nazwany widok regionu.

<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 } } 
}

Istnieje demo można zobaczyć, który pokazuje, jak to działa. Uwaga: wersja demonstracyjna używa kart i wyświetla/ukrywa widoki interfejsu użytkownika. Twój przypadek użycia nie musi pokazywać/ukrywać każdego nazwanego widoku.

Aby uzyskać więcej informacji, sprawdź numer demo source code.

Źródło

2014-09-28 16:07:00

Ah, wspaniale, oddam to. Lubię to rozwiązanie lepiej niż dwie oddzielne aplikacje. – Raman

@Raman na pewno chcesz to sprawdzić. Po tym, jak nie znalazłem tego pytania, opublikowałem [moje własne] (http://stackoverflow.com/a/26126797/1294804), na którym Chris upuścił niesamowity [link plunker] (http://plnkr.co/edit/nc5ebdDonDfxc1PjwEHp?p = podgląd), który doskonale demonstruje nasze zastosowanie. – cazzer

Dziękuję, lepkie stany działały idealnie. Dobra robota. Odpowiedź została zaakceptowana. – Raman

Utworzono separate angular app for each region. Komunikacja między aplikacjami odbywa się poprzez uzyskanie odwołania do odpowiedniego zakresu za pośrednictwem elementu aplikacji w DOM i wysłanie zdarzenia za pośrednictwem angular.element(document.getElementById('RegionX_App')).scope().$emit jako .

AKTUALIZACJA: Skończyłem z używaniem lepkich stanów w dodatkach UI-Router, jak opisano w the answer autorstwa Chrisa T, i działało idealnie.

Źródło

2014-09-26 23:13:54 Raman

Niezależny routingu dla wielu regionów w angularjs jednej aplikacji widoku

Odpowiedz

Powiązane problemy