AngularJS: múltiples ng-view en una sola plantilla

132

Estoy creando una aplicación web dinámica usando AngularJS. ¿Es posible tener múltiples ng-viewen una sola plantilla?

angularjs ng-view Jayram
fuente
2
parece haber una solicitud de extracción, aún con algunos errores: github.com/angular/angular.js/pull/1198
Alp
44
Jan Varwig escribe sobre el papel de las directivas en Angular. No es una respuesta a su pregunta, pero en algunos casos sus ideas podrían ser una buena alternativa: jan.varwig.org/archive/angularjs-views-vs-directives/…
Juha Palomäki
estaba pasando por el tutorial angular y tenía exactamente la misma pregunta, no lo dejan muy claro, aunque parece un concepto bastante profundo ...
qwwqwwq

Respuestas:

100

Puedes tener solo uno ng-view.

Puede cambiar su contenido de varias maneras: ng-include, ng-switcho mapeo de diferentes controladores y plantillas a través de la routeProvider.

pasine
fuente
1
los controladores de mapeo y las plantillas reemplazarán todo el elemento ng-view, ¿verdad?
zx1986
9
¿Qué pasa con el cambio dinámico del contenido de un widget? ¿No le gustaría crear una vista para el widget y un controlador para el widget y un modelo para el widget?
Ray Suelzer
¿Se recomienda usar vistas? ¿No es mejor para definir con divs ng-showy ng-hideya controlar su visibilidad mediante variables? Porque a veces me gustaría ocultar / mostrar múltiples componentes
SomethingSomething
39

UI-Router es un proyecto que puede ayudar: https://github.com/angular-ui/ui-router Una de sus características son las vistas con nombre múltiple

UI-Router tiene muchas características y le recomiendo que lo use si está trabajando en una aplicación avanzada.

Consulte la documentación de varias vistas con nombre aquí .

Morteza Ziyae
fuente
66
Desafortunadamente, como dice el archivo léame de ui-router: 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 registro de cambios y actualizando su uso en consecuencia.
trainoasis
1
@trainoasis Lo usé para múltiples proyectos, parece "muy" estable y hasta ahora no tuve problemas para cambiar la API, de hecho, no recuerdo ningún cambio importante en la API.
Morteza Ziyae
19

Creo que puedes lograrlo solo con un soltero ng-view. En la plantilla principal puede tener ng-includesecciones para vistas secundarias, luego, en el controlador principal, defina las propiedades del modelo para cada plantilla secundaria. Para que se unan automáticamente a las ng-includesecciones. Esto es lo mismo que tener múltiplesng-view

Puedes consultar el ejemplo dado en la ng-include documentación

en el ejemplo, cuando cambia la plantilla de la lista desplegable, cambia el contenido. Aquí suponga que tiene un contenido principal ng-viewy, en lugar de seleccionar manualmente el contenido secundario seleccionando el menú desplegable, lo hace como cuando se carga la vista principal.

Tekz
fuente
2
En ausencia de una solución como UI-Router, ng-include es de hecho una alternativa viable, como usted ha explicado. Lo que ng-include no puede lograr es múltiples vistas controladas por URL (estado), $ route no puede representar dinámicamente diferentes vistas basadas en la URL actual. Podríamos torcer los brazos de Angular y hacer que suceda mediante el uso de una lógica personalizada en el controlador, como el ejemplo en la ng-include documentación , pero no es un patrón de arquitectura de aplicación deseable, UI-Router es el tipo correcto de solución.
Yiling
Un plus para el comentario de @Yiling. Usar ng-include es una solución alternativa.
Farshid Saberi
13

Con el ng-viewmódulo normal no puede tener más de una plantilla dinámica.

Sin embargo, este proyecto le permite hacerlo (buscar ui-router).

ŁukaszBachman
fuente
3
angular-ui parece una buena opción en el futuro (cercano) pero aún parece muy inestable para uso en producción
David Barreto
8

Es posible tener vistas múltiples o anidadas. Pero no por ng-view.

El módulo de enrutamiento primario en angular no admite múltiples vistas. Pero puedes usar ui-router. Este es un módulo de terceros que puede obtener a través de Github, angular-ui / ui-router, https://github.com/angular-ui/ui-router . También se está desarrollando una nueva versión de ngRouter (ngNewRouter) actualmente. No es estable en este momento. Así que le proporciono un ejemplo de inicio simple con ui-router. Al usarlo, puede nombrar vistas y especificar qué plantillas y controladores deben usarse para representarlos. Con $ stateProvider, debe especificar cómo se deben representar los marcadores de posición de vista para un estado específico.

<body ng-app="main">
    <script type="text/javascript">
    angular.module('main', ['ui.router'])
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
        $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: '/app/header.html'
                },
                'content': {
                    templateUrl: '/app/content.html'
                }
            }
        });
    }]);
    </script>
    <a ui-sref="home">home</a>
    <div ui-view="header">header</div>
    <div ui-view="content">content</div>
    <div ui-view="bottom">footer</div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>

Necesita hacer referencia a angularjs y angular-ui.router para esta muestra.

$ bower install angular-ui-router
Farshid Saberi
fuente
Gracias Farshid esto es genial! Debe mencionarse en el repositorio angular-ui / ui-router de Github github.com/angular-ui/ui-router donde obtuve el módulo
totalmente total
No estoy seguro de por qué necesitarías hacer eso. ¿Por qué no incluir ng el encabezado / pie de página y ng-ver el contenido?
user441521
ng-include funcionará si los archivos están alojados, por ejemplo. en nodejs. Si trabaja con el directorio local, arrojaría un error de dominio cruzado.
Sid
0

No puedes tener múltiples ng-view. A continuación se muestra mi caso de uso donde resolví mi requisito. Quería tener un comportamiento con pestañas en el diálogo de mi modelo. Estaba enfrentando un problema al hacer clic en las pestañas que tienen un hipervínculo que invocará los enlaces del enrutador. Resolví esto usando el botón y CSS para pestañas. Cuando el usuario hace clic en la pestaña, en realidad no llamará a ningún hipervínculo que siempre invocará el ng-router. Cuando el usuario hace clic en la pestaña, llamará a un método, donde cargaré dinámicamente html. A continuación se muestra la función al hacer clic en la pestaña

self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});

Usuario $ templateRequest. En la página test_template.html agregue su contenido html. Este contenido html estará vinculado a su controlador.

Aslam anwer
fuente