web-dev-qa-db-fra.com

Angularjs: plusieurs partiels en html unique?

Est-il possible de récupérer plusieurs partiels html en un seul html? J'ai la prochaine situation:

Template: {header} {main} {footer}

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

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

using ng-include Je dois récupérer 6 html du serveur. Si je récupère plusieurs partiels dans un html, je récupérerai 2 html sur le serveur uniquement, un pour/index et un pour/help.

  • Cette situation est un petit exemple de la situation réelle.
  • La balise script de type ng-template ne fonctionne pas pour moi, car le script doit être inclus avant ng-include.

Merci!

Mise à jour 04/07/12:

Je cherche à mettre à jour plus d'une div à la fois, avec une récupération html unique. Je n'aime pas ça:

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

Après dans le modèle, utilisez ng-includes pour inclure ces partiels. Je pense que ce n'est pas la bonne façon. Il y a une autre manière?

Merci!

htmlpartialsangularjs
31
jlarghi

Les modèles peuvent être intégrés dans le html principal. Par exemple, avec le index.html Suivant:

<!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>

vous pouvez utiliser le app.js suivant:

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';
  }]);
}]);

Le documentation pour le service $ templateCache a plus de détails.

50
Marcello Nuccio

Ce que je fais, c'est utiliser un modèle au lieu de templateUrl, et utiliser le plugin de texte requirejs pour charger les modèles. De cette façon, pour le développement, vous pouvez avoir des milliers de fichiers pour vos modèles, mais une fois que vous avez réduit, vous n'avez qu'un seul fichier javascript avec tous les modèles en ligne.

J'ai créé un projet open source qui est configuré pour l'épine dorsale mais peut facilement être modifié pour angular qui fait la minification et nécessite le câblage du plugin de texte pour vous: http://github.com/davidjnelson/agilejs

5
davidjnelson