div - ng-view angularjs ejemplo
AngularJS-Multiple ng-view en una sola plantilla (5)
Estoy construyendo una aplicación web dinámica usando AngularJS. ¿Es posible tener múltiples ng-view en una sola plantilla?
Al usar el módulo ng-view normal, no puedes tener más de una plantilla dinámica.
Sin embargo, este proyecto le permite hacerlo (busque ui-router ).
Creo que puedes lograrlo teniendo solo ng-view . En la plantilla principal puede tener secciones ng-include para subvistas, luego en el controlador principal definir las propiedades del modelo para cada subplanta. Para que se unan automáticamente a ng-include secciones ng-include . Esto es lo mismo que tener múltiples ng-view
Puede verificar el ejemplo dado en la ng-include ng-include
en el ejemplo, cuando cambia la plantilla de la lista desplegable, cambia el contenido. Supongamos que tiene una ng-view principal y en lugar de seleccionar manualmente el contenido secundario seleccionando menú desplegable, lo hace como cuando se carga la vista principal.
Es posible tener vistas múltiples o anidadas. Pero no por ng-view.
El módulo de enrutamiento primario en angular no admite vistas múltiples. 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 simple de inicio con ui-router. Al usarlo puede nombrar vistas y especificar qué plantillas y controladores se deben usar 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
Puedes tener solo una ng-view .
Puede cambiar su contenido de varias formas: ng-include , ng-switch o asignando diferentes controladores y plantillas a través de routeProvider.
UI-Router es un proyecto que puede ayudar: https://github.com/angular-ui/ui-router Una de sus características es Multiple Named Views
UI-Router tiene muchas características y te recomiendo que lo uses si estás trabajando en una aplicación avanzada.
Consulte la documentación de múltiples vistas nombradas here .