Angularjs: ¿múltiples parciales en un solo html?

¿Es posible recuperar múltiples parciales html en un solo html? Tengo la siguiente situación:

Template: {header} {main} {footer}

/index: header:"Welcome" main:"welcome text" footer:""

/help: header:"Help title" main:"faq tips" footer"Back to home"

usar ng-incluir Tengo que recuperar 6 html del servidor. Si recuperaré múltiples parciales en un html, recuperaré 2 html solo del servidor, uno para /index y otro para /help.

  • Esta situación es un pequeño ejemplo de la situación real.
  • La etiqueta guión con tipo plantilla ng no funciona para mí, porque el script debe incluirse antes de ng-incluir.

¡Gracias!

Actualización 04 / 07 / 12:

Busco actualizar más de un div a la vez, con una recuperación de html única. no me gusta esto:

function IndexCtrl($scope) {
    $scope.mainPage = 'partials/index/index.html';
    $scope.headerTemplate = 'partials/index/header.html';
    $scope.footerTemplate = 'partials/index/footer.html';
}

Después en la plantilla, use ng-includes para incluir estos parciales. Creo que esta no es la forma correcta. ¿Hay otra manera?

¡Gracias!

preguntado el 04 de julio de 12 a las 04:07

¿Puede proporcionar más información sobre lo que está buscando o un violín con lo que está tratando de lograr? -

2 Respuestas

Las plantillas se pueden incrustar en el html principal. Por ejemplo, con la siguiente index.html:

<!DOCTYPE html>
<html ng-app=app>
<meta charset=utf-8>
<title>App</title>
<ng-view>Loading...</ng-view>
<script type=text/ng-template id=partial1.html>
 <p>foo = {{foo}}</p>
</script>
<script type=text/ng-template id=partial2.html>
 <p>Contents of partial2.html</p>
</script>
<script src=app.js></script>

puedes usar lo siguiente app.js:

angular.module('app', [], ['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider) {

  $routeProvider.when('/p1', { templateUrl: 'partial1.html', controller: 'Partial1' });

  $controllerProvider.register('Partial1', ['$scope', function($scope) {
    $scope.foo = 'bar';
  }]);
}]);

El documentación para el servicio $templateCache tiene más detalles.

respondido 02 mar '14, 16:03

Una cosa a tener en cuenta con esta solución es que probablemente no escala bien. Si solo tiene unas pocas plantillas, esto funcionará muy bien. Si está creando una aplicación a mayor escala con docenas de plantillas, su archivo de índice será muy pesado y difícil de mantener. - Ryanzec

Mmm bueno, si usa un backend para generar el HTML, podría administrar sus parciales como parciales reales (diferentes archivos), pero uniendo todo en un HTML para el rendimiento. Es como lo hago ahora mismo. - marçal juan

@Marçal, hago esto en un paso de construcción, además de minimizar todo el css y js y distribuir en bloques lógicos (común + aplicación actual), genero un archivo con todas las plantillas que fácilmente pueden tener una respuesta de 304 como lo maneja el servidor o la capa de caché ... En el entorno de desarrollo, solo sirvo los archivos por separado a pedido. - Alfonso de la Osa

¿Hay alguna forma posible de poner html en un archivo separado? es decir, template1.html, teplate2.html, etc. manish rawat

@ManishRawat si la plantilla no está en el caché, entonces se descarga en templateUrl. - marcelo nuccio

Lo que hago es usar una plantilla en lugar de templateUrl, y usar el complemento de texto requirejs para cargar las plantillas. De esa manera, para el desarrollo, puede tener miles de archivos para sus plantillas, pero una vez que minimiza, solo tiene un archivo javascript con todas las plantillas en línea.

Creé un proyecto de código abierto que está configurado para la red troncal pero que se puede modificar fácilmente para angular, que hace la minificación y requiere el cableado del complemento de texto para usted: http://github.com/davidjnelson/agilejs

respondido 04 mar '13, 23:03

otra alternativa, y lo que hace google, es usar closure en lugar de requirejs para la gestión de dependencias. - Davidjnelson

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.