¿Angular JS admite el routing de múltiples vistas en la misma página?

¿Angular JS admite tener múltiples secciones ng-view, cada una con sus propias templates en la misma página? Al configurar su configuration, debe conectar la ruta de la URL a diferentes controlleres y templates. Pero cuando tiene varias vistas en la misma página, cada una de ellas tendrá que ajustar su plantilla y su controller utilizando el valor #path de la url, y para cambiar la plantilla de la vista necesitaremos cambiar a medida que cambie el valor #path. .

Entonces, ¿cómo jugarían las diferentes secciones ng-view entre ellas, ya que cada una necesitaría agregar su propio valor único de ruta a la url? O bien, la ruta url y el valor # de alguna manera se mantienen como construcciones privadas dentro de cada vista ng y, por lo tanto, permiten múltiples secciones ng-view en la misma página.

5 Solutions collect form web for “¿Angular JS admite el routing de múltiples vistas en la misma página?”

Múltiples vistas es una limitación en angularjs y la documentation no aclara cómo estructurar correctamente una aplicación con vistas complejas. Por favor, eche un vistazo a las publicaciones de Jan Varwig sobre este tema

  • Cómo hacer vistas anidadas en AngularJS (Sugerencia: No hacer)

  • AngularJS: Vistas vs. Directivas

Secciones relevantes:

"Las vistas no son lo que utilizas para estructurar tu aplicación. De hecho, las vistas son más bien una muleta, un atajo, para crear estructuras similares a los sitios web tradicionales, solo con angular como controller. Cuando se desarrolla una aplicación web, la forma de lidiar con interfaces complejas es usar, en combinación: Objetos / variables de scope que almacenan el estado de vista deseado explícitamente. Directivas ngSwitch en este estado de vista. Directivas para include templates personalizadas / realizar un complejo comportamiento de manipulación DOM. Deje de pensar en su aplicación en términos de vistas que necesiten Este tipo de pensamiento se alinea mejor con los frameworks imperativos, pero no funciona bien en angular ".

" View-Containers no tiene sentido, separado de su semántica a través de las routes. La otra queja secundaria que tengo con las vistas anidadas de UI-Routers es que violan otra idea central de AngularJS: su DOM es el lugar principal para describir la estructura de su aplicación. Leer una plantilla debería darle una idea de lo que sucede. Si desea editar un usuario, coloque una directiva en su plantilla: un lector verá de inmediato qué hace esa directiva y de qué datos depende. Si escribe la directiva correctamente será independiente de la location, puede ubicarla en otro lugar de su aplicación, siempre que pase a un usuario a través del atributo que funcionará. Usar vistas le ensucia las templates con contenedores sin sentido, externalizando el propósito real de cada vista en las routes / estados definidos en otra parte. Si anida routes, el context de cada vista se vuelve implícito, es más difícil moverlas y la única forma de pasar datos a una vista es a través del scope ".

ng-route no admite múltiples ng-view dentro de ng-app .

Puede ver ui-router como un proyecto que proporciona cierto soporte para tener múltiples layouts (incluidos layouts nesteds) vinculados a la URL.

Caveat Emptor

Nota: UI-Router está en desarrollo activo. Como tal, aunque esta biblioteca está bien probada, la API puede cambiar. Considere usarlo en aplicaciones de producción solo si se siente cómodo siguiendo un logging de cambios y actualizando su uso en consecuencia.

Use ui-router en lugar de la ruta ng enlatada. ui-router tiene totalmente vistas anidadas, y es increíble y realmente fácil de aprender. Recomendaría usar ui-router en lugar de ngRoute a cualquiera.

Después de leer más sobre esto, parece que, aunque la funcionalidad para múltiples ng-view ha tenido un número de requestes, no fue capaz de hacerlo en la versión Angular, pero existe la posibilidad de algo en futuras versiones.

En esta discusión, Misko Hevery señaló otro enfoque, que es usar ng-include.

Luego también está el enfoque de directiva personalizada en las publicaciones de Jan Varwig que Vikas ya ha citado.

También encontré este proyecto Angular Multiple View en github, que puede ser un enfoque más.

Para este tipo de cosas puedes usar templates.

Cree un file, por ejemplo, firstNavigation.html, que tenga su fragment de html. Luego llámalo en el controller como tal.

$ scope.nav = 'src / partials / firstNavigation.html';

  • ¿Cómo borrar la memory sensible en JavaScript?
  • Directiva AngularJS - enlace de nombre de input dynamic
  • Formato AngularJS ui-date
  • Función ng-change llamada varias veces desde la input dentro de ng-repeat
  • AngularJS: ¿Cómo cambiar ng-repeat limitTo en function de la variable?
  • Aplazar toda la carga de la página en AngularJS hasta que el ajax del service haya finalizado
  • Usando ng-repeat y filter, ¿cómo saber qué elementos son visibles?
  • Cómo get el pie de página de la interfaz angular ui ¿La plantilla funciona?
  • Enrutador ui angular múltiples vistas con nombre para todos los estados
  • Texto pnetworkingeterminado de angularjs para ng-repeat vacío en object javascript
  • Carga de file angular con parameters
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.