javascript - ejemplos - Enrutamiento independiente para múltiples regiones en una aplicación de una sola página AngularJS
component angularjs (2)
Puede usar Extras UI-Router - estados adhesivos para lograr su objetivo.
Querrá una llamada <div ui-view=''name''></div> para cada región. A continuación, agregue sticky: true a la definición de estado que se dirige a la vista nombrada de esa región.
<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 } }
}
Hay una demostración que puede ver que muestra cómo funciona esto. Nota: la demostración utiliza pestañas y muestra u oculta las vistas de usuario según corresponda. Su caso de uso no necesita mostrar / ocultar cada vista nombrada.
Consulte el código fuente de la demostración para obtener más información.
Tengo una aplicación AngularJS de una sola página con cuatro regiones, cada una con su propio contenido:
Necesito que cada región se comunique a través de los servicios, pero de lo contrario deben tener su propio enrutamiento independiente para fines de visualización, es decir, cada uno debe tener su propio estado de vista.
He intentado hacer esto ( plunkr ) con angular-ui-router pero no puedo descifrar cómo crear estados angulares-ui que afectan solo a un módulo o región en particular, sin modificar el resto de las regiones en la página.
La página contiene las regiones:
<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>
Y la aplicación intenta definir cada región en un módulo independiente:
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: {
''region1@'': {
template: ''Initial Region 1 State, go to <a ui-sref="second1">Second State</a>''
}
}
})
.state(''second1'', {
url: ''/'',
views: {
''region1@'': {
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: {
''region2@'': {
template: ''Initial Region 2 State, go to <a ui-sref="second2">Second State</a>''
}
}
})
.state(''second2'', {
url: ''/'',
views: {
''region2@'': {
template: ''Second Region 2 State, go to <a ui-sref="initial2">Initial State</a>''
}
}
});
});
Cada módulo debe tener su propio estado "inicial" y "segundo", y ambos deben mostrarse en la pantalla al mismo tiempo, y cambiar el estado de uno no debe afectar al otro. Si esto no se puede hacer con angular-ui-router, ¿cuál es la mejor manera de hacerlo con Angular?
Creé una aplicación angular separada para cada región . La comunicación entre las aplicaciones se realiza mediante la obtención de una referencia al ámbito relevante a través del elemento de la aplicación en el DOM, y el envío de un evento a través de angular.element(document.getElementById(''RegionX_App'')).scope().$emit como se muestra aquí .
ACTUALIZACIÓN: Terminé usando Sticky States en U-Router Extras como se describe en la respuesta de Chris T, y funcionó perfectamente.