Comment avoir un en-tête commun partagé par toutes les pages web dans AngularJS?

Je voudrais avoir un header.html qui définit la façon dont l'en-tête pour toutes mes pages web va ressembler. Comment puis-je insérer ce header.html dans les autres pages web en haut de la page?

Il peut y avoir de meilleures méthodes pour parvenir à un en-tête commun d'être partagé autour de. Comme je me considère encore comme un débutant en html (mais pas à la programmation), je suis ouvert à de meilleures suggestions.

Merci.

EDIT: Utile réponses ont mentionné l'aide de PHP. Cependant, je suis en utilisant AngularJS en tant que front-end et mon PHP backend est tout simplement une pure RESTE du serveur. Ma préférence est pour faire de la AngularJS, et non pas la manière de PHP.

c'est le travail de côté de serveur de code, par exemple. en PHP, vous aurez un header.php (ou .html), et dans l'index, ou chaque page en fonction de la façon dont il est mis en place, vous aurez quelque chose comme include('header.php');
Regarde ma réponse sur ceci question.
Merci pour les conseils sur l'utilisation de PHP. Cependant, je suis en utilisant AngularJS en tant que front-end et mon PHP backend est tout simplement une pure RESTE du serveur. J'ai besoin pour ce faire de l'AngularJS façon.

InformationsquelleAutor user781486 | 2014-05-03

24

Un AngularJS solution devrait ressembler à ceci:
```
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <script src='angular.js'></script>
  <script src='main.js'></script>
</head>
<body>
<div ng-controller="HeaderCtrl">
  <div ng-include src="header.url"></div>
  <script type="text/ng-template" id="header.html"></script>
</div>
</body>
</html>
```
main.js:
```
var myApp = angular.module('myApp', []);

function HeaderCtrl($scope) {
    $scope.header = {name: "header.html", url: "header.html"};
}
```
header.html:
```
<p> Header content goes here </p>
```
La raison pour laquelle je ne pas tout simplement conseiller une solution telle que: <div ng-include="'header.html'"> est d'éviter tout retard dans le chargement l'en-tête. Pour plus d'informations, jetez un oeil à angularjs - Point ng-inclure à une partie qui contient un script directive.

Sinon jQuery serait comme ça.
```
<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#headerContent").load("header.html"); 
    });
    </script> 
  </head> 
  <body> 
     <div id="headerContent"></div>
  </body> 
</html>
```
Enfin une solution PHP devrait ressembler à ceci:
```
<html> 
  <head> 
  </head> 
  <body> 
    <?php include('header.html'); ?>  
  </body> 
</html>
```
Meilleur de la chance de l'apprentissage!
- Merci! De l'autre côté de la question. J'ai testé que <div ng-include="'header.html'"> fonctionne aussi très bien. Cependant, <div ng-include="header.html"> ne le fait pas. Pourquoi ai-je besoin de joindre extra "" pour header.html? En passant, je vais utiliser votre solution si mon header.html prend trop d'ampleur et de la charge trop lentement
- Car angulaire est d'essayer de trouver $scope.header.html au lieu de la chaîne littérale header.html
- Merci. Pas étonnant que je ne pourrais pas obtenir de travail au premier abord.
InformationsquelleAutor Brett
7

La façon dont je gère généralement ce, et il permet de plus d'une tête, est d'avoir un shell.html

Il pourrait ressembler à ceci:
```
<div ng-controller="ShellController">
  <div ng-include="'app/shell/header/header.html'"></div>
  <div ng-view></div>
  <div ng-include="'app/shell/footer/footer.html'"></div?>
</div>
```
Où vous êtes ng-including la statique bits, et que vous utilisez Angulars ngRoute (ou l'interface utilisateur du routeur)
- Merci. Solution Simple et élégante.
InformationsquelleAutor Tom
7

Les autres réponses fournies manquer le point ici du client à l'aide de Angular.js. Angulaire est en fait conçu pour ce concept. Il ya un couple de façons différentes pour obtenir des modèles client avec Angular.js.
1. À l'aide Angulaire d'une Page d'Application (SPA), où vous pouvez modifier dynamiquement le contenu sur un seul document HTML plutôt que de rediriger vers des pages différentes.
2. Angulaire à l'aide de Directives pour encapsuler commun de fonctions de la page.
Vous pouvez utiliser une combinaison des 2 pour obtenir presque n'importe quelle combinaison de mise en page.

à l'aide de la angulaire fournisseur d'itinéraire ou un plugin comme Angulaire de l'INTERFACE utilisateur du Routeur vous pouvez définir une commune de la page HTML, et dans la page HTML utiliser le ng-view directive pour désigner une section de votre page pour être remplacé dynamiquement à l'exécution. vous pouvez ensuite définir des modèles html qui peuplent la partie dynamique.

À l'aide de Directives, vous pouvez créer de nouveaux éléments HTML design plus expressif, de mise en page. Par exemple, vous pouvez définir un my-menubar de directive contenant des modèles HTML, javascript éléments, même de la logique métier, et de l'inclure la barre de menu sur une page simplement en utilisant une syntaxe comme <div my-menubar /> Directives sont très puissants, et je vous recommande vivement de lire à leur sujet dans le Angulaire Guide Du Développeur.

Un exemple d'une page simple qui peut utiliser ces fonctionnalités:
```
<div ng-controller=MainController>
    <div main-menu />
    <div ng-view> </div>
    <div page-footer />
</div>
```
Ligne de fond, vous n'avez pas besoin d'un serveur pour exécuter la logique pour reproductible code, comme Angular.js est conçu pour exactement cet effet.

InformationsquelleAutor Claies

Vous devez vous connecter pour publier un commentaire.