routing - route - ng-view angularjs ejemplo
Angular JS: 2 aplicaciones en la misma página, solo 1 debería afectar la ubicación del navegador (1)
Estoy buscando una solución para alojar 2 aplicaciones Angular JS en una sola página. El requisito adicional es que solo 1 de estas aplicaciones dependa / afecte a la URL real. Aquí está el código:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.2/angular.min.js"></script>
<script type="text/javascript">
var app1 = angular.module("app1", [], function($routeProvider) {
$routeProvider
.when("/1", { template: "<h1>app 1 page 1</h1>" })
.when("/2", { template: "<h1>app 1 page 2</h1>" })
.otherwise({ redirectTo: "/1" });
});
var app2 = angular.module("app2", [], function($routeProvider) {
$routeProvider
.when("/1", { template: "<h1>app 2 page 1</h1>" })
.when("/2", { template: "<h1>app 2 page 2</h1>" })
.otherwise({ redirectTo: "/1" });
});
$(function() {
angular.bootstrap($(".app1")[0], ["app1"]);
angular.bootstrap($(".app2")[0], ["app2"]);
});
</script>
</head>
<body>
<div class="app1">
<h1>App 1</h1>
<ul>
<li><a href="#/1">Go 1</a></li>
<li><a href="#/2">Go 2</a></li>
</ul>
<ng-view></ng-view>
</div>
<div class="app2">
<h1>App 2</h1>
<ul>
<li><a href="#/1">Go 1</a></li>
<li><a href="#/2">Go 2</a></li>
</ul>
<ng-view></ng-view>
</div>
</body>
</html>
Lo que quiero hacer es:
Cuando el usuario navega a #/1 manualmente, el resultado es:
app 1 page 1
app 2 page 1
Cuando el usuario navega a #/2 manualmente, el resultado es:
app 1 page 2
app 2 page 1
Cuando el usuario hace clic en enlaces en la aplicación 1, estos enlaces afectan la ubicación del navegador, estos enlaces son procesados por la aplicación1, y la aplicación2 siempre se restablece a su #/1 (así que, cualquiera que sea la URL, la aplicación2 debería ser suya #/1 ).
Cuando el usuario hace clic en los enlaces en la aplicación2, esto NO afecta la ubicación del navegador, estos enlaces NO son procesados por la aplicación1, y solo la aplicación2 se ve afectada. Cuando el usuario acceda a Refresh, la aplicación 2 debe restablecerse a su "estado cero", que es #/1
La única solución en la que puedo pensar es deshacerse del enrutamiento en la aplicación2 y simplemente usar onclick / ng-click para enlaces. Esto parece ser un sucio truco.
¿Alguna posibilidad de que todavía pueda usar el enrutamiento en la aplicación2? Si tienes la idea, probablemente conozcas una solución completamente diferente que resuelva el problema, también te agradeceré si la compartes.
¡Gracias!
A menudo existe la necesidad de múltiples aplicaciones en la misma página.
¿Esto ayuda?
-> http://jsfiddle.net/2yUAD/1/ <-
La idea básica (así es como manejo las aplicaciones múltiples con este glorioso marco) es para aplicaciones de módulos ''subcontratadas''. Siempre tengo una aplicación ''Página'' e inicializo sub aplicaciones cuando y donde las necesito.
Aclamaciones.