javascript - ui sref angularjs
Nesting ng-views en js angulares (6)
Tenía dos aplicaciones diferentes en angular. Durante la integración a una sola aplicación tuve que
nest ng-views.
Para la muestra (index.html) es
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
Una de las vistas de mi aplicación es (view2.html)
<div class="ng-view"></div>
<p>This is the partial for view 1.</p>
{{ ''Current version is v%VERSION%.'' | interpolate }}
Ahora esta aplicación tiene diferentes vistas una vez más dentro de ella.
Lo intenté pero la página no se está cargando. ¿Existe la posibilidad de anidar ng-views?
Si no es posible, puede explicarse
Gracias por adelantado
Mira esto:
Parece lo que estás buscando
Hay muchas bibliotecas de terceros para vistas anidadas y enrutamiento. ui-router ya se menciona aquí, también sugeriría echarle un vistazo a este:
http://angular-route-segment.com
Tiene las capacidades de vistas anidadas que usted solicita exactamente, y es mucho más simple de usar que ui-router. En tu ejemplo:
index.html :
<div app-view-segment="0"></div>
view1.html :
<p>This is the partial for view 1.</p>
<div app-view-segment="1"></div>
deep-view.html :
<p>This is the partial for view inside view1.</p>
Sinceramente, dudo que esto sea un Angular idiomático (y se menciona anteriormente que hay posibles problemas entre navegadores), pero mi solución ng-include para tener una vista "todo" con mis otras vistas anidadas dentro de algo así como un all.html :
<div class="all" ng-include src="''views/foo.html''" ng-controller="FooCtrl">
</div>
<div class="all" ng-include src="''views/bar.html''" ng-controller="BarCtrl">
</div>
<div class="all" ng-include src="''views/baz.html''" ng-controller="BazCtrl">
</div>
Esto funcionó para mí, pero sentí que iba contra corriente. Personalmente intentaré algo como lo que Eamon vincula en mi siguiente pase.
Respuesta actualizada:
UI Router (que ahora se encuentra aquí: https://angular-ui.github.io/ui-router/site/#/api/ui.router ) se considera generalmente como la mejor solución para el enrutamiento complejo en AngularJS.
Respuesta original:
Las vistas de anidamiento no son posibles de forma nativa, a partir de ahora, en AngularJS. En mi última aplicación, utilicé una solución derivada de aquí: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm
Permitiéndome jerarquizar vistas (y omitir por completo la limitada ng-view)
Después de hacerlo, apareció esta otra solución (más simple, mejor, creo):
http://angular-ui.github.com/ (baje hasta "Verificación de ruta")
¡Echale un vistazo!
Si no quiere recurrir a otra biblioteca para resolver su problema (no es que haya algún problema con eso), también debe considerar el uso de directivas y ng-switch y ng-show.
Este enfoque fue dado como una respuesta aquí:
Sugeriría que eche un vistazo al proyecto ui-router del equipo de AngularUI. Este proyecto contiene un nuevo enrutador basado en estados, que también puede reaccionar a las URL, pero permite un mejor manejo del estado de la aplicación.
Esto incluye el uso de tener vistas múltiples y / o anidadas.
Hace un tiempo tuve una pregunta similar, así que tal vez sus respuestas también te ayuden: ¿cómo configuro vistas anidadas en AngularJS?
Además, puede esperar que ui-router se integre en AngularJS en una versión futura, por lo que probablemente esta sea la forma en que el enrutamiento funciona en el futuro de todos modos. Así que no hay necesidad de seguir con otras soluciones si ya puede tener lo que será el próximo hoy :-)