Angular JS - comment gérer le code HTML dupliqué comme headers / footers?
je viens de lire le introduction à Angular JS mais je n'ai rien vu à propos d'un moyen de code vers le haut de votre code D'en-tête HTML et le code de pied de page juste une fois et l'avoir inclus dans toutes vos pages.
y a-t-il une façon officielle/reccomendée de faire cela?
4 réponses
L'officiel de la façon de le faire est d'utiliser ngInclude la directive, qui "fetches, compiles and includes an external HTML fragment".
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
<div ng-include src="'header.url'"></div>
...
<div ng-include src="'footer.url'"></div>
</body>
</html>avec ceci vous pouvez réutiliser le même header.url et footer.url dans toutes vos pages.
si vous créez une application web d'une seule page (par exemple, avec bookmarkable views/pages utilisant $routeProvider), vous pouvez placer votre en-tête et pied de page directement dans l'index.html (ou utilisez ng-include) puis utilisez ng-view pour basculer entre vues / pages:
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
... header here, or use ng-include ...
<div ng-view></div>
... footer here, or use ng-include ...
</body>
</html>
je viens de trouver une autre façon d'inclure le même morceau de code dans des vues multiples :
=> créer et utiliser votre propre Angulaire 'directives'
1) définissez une directive:
angular.module('myApp')
.directive('appfooter', function() {
return {
templateUrl: 'widgets/footer.html'
};
});
2) Créez votre modèle appelé ici 'widgets/footer.html".
3) utilisez votre nouvelle directive :
<div appfooter></div>
Références :
j'espère que cela aidera
je vous suggère de déplacer votre balise à la fin de la page pour améliorer les temps de chargement de l'application puisque le chargement html n'est pas bloqué par
</head>
<body>
<div ng-include src="header.url"></div>
...
<div ng-include src="footer.url"></div>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</body>