2012-07-04 15 views
31

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

Template: {header} {main} {footer} 

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

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

usando ng-incluir tengo que retreive 6 html desde el servidor. Si voy a recuperar múltiples parciales en un html, recuperaré 2 html del servidor solamente, 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 el tipo ng-plantilla no funcionan para mí, porque el guión se debe incluir antes de ng-incluir.

Gracias!

Actualización 04/07/12:

busco para actualizar más de un div a la vez, con un retreive html único. 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 de la plantilla, utilice ng-includes para incluir estos parciales. Creo que esta no es la forma correcta. Hay otra manera?

Gracias!

+0

¿Puede dar más información acerca de lo que está buscando o un violín con lo que estás tratando de lograr? – ganaraj

Respuesta

50

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> 

puede utilizar el 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 documentation for the $templateCache service tiene más detalles.

+0

Gracias! Muy útil. – jlarghi

+4

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

+9

Mmm, si utiliza un servidor para generar el código HTML, puede administrar sus parciales como parciales reales (archivos diferentes), pero unir todo en un HTML para el rendimiento. Es como lo hago ahora mismo. –

5

Lo que hago es usar la 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 columna vertebral, pero puede ser fácilmente modificado para angular que hace la minimización y RequireJS texto cableado plug-in para usted: http://github.com/davidjnelson/agilejs

+0

Otra alternativa, y lo que hace Google, es usar el cierre en lugar de requirers para la administración de la dependencia. – davidjnelson