web-dev-qa-db-fra.com

AngularJs inclut un modèle partiel

J'ai ceci dans mon fichier de mise en page principal

<body>
    <header id="header" ng-controller="HeaderController"></header>
    <div class="container" ng-view></div>

J'ai un modèle partiel header.html dans ma structure de répertoires.

Comment inclure ce modèle dans mon application? Je pensais que angular inclut automatiquement le modèle après le traitement du contrôleur, mais cela ne fonctionne pas.

Le noeud d'en-tête doit être remplacé par le contenu de ce fichier.

angularjstemplatesincludepartial
53
user3403716

Une façon d'inclure des fragments templates/html à partir de fichiers externes consiste à utiliser le fichier ng-include directive ( doc ).

<ng-include src="'/path/to/the/header.html'"></ng-include>

ou

<div ng-include src="'/path/to/the/header.html'"></div>
91
Suvi Vignarajah

De Angular 2, ngInclude a été supprimé et les directives personnalisées sont préférées. C'est la façon dont je viens avec

  1. Définissez le composant principal de votre application, lequel lien vers la page maître

        @View({
        templateUrl:   'client/app/layout/main.html',
        directives: [ROUTER_DIRECTIVES, Navigation, Footer]
    })
    @Component({selector: 'app'})
    @RouteConfig(
        routerConfig
    )
    class MainComponent {
    }

Et c'est le modèle principal

<!---- Navigation bar ---->
<navigation></navigation>
<!----/ Navigation bar ---->

<!---- Main Part ---->
<router-outlet>
</router-outlet>
<!----/ Main Part ---->

<!---- Footer ---->
<footer></footer>
<!----/ Footer ---->
  1. Définir un base.html, qui contiendra la balise body et la balise app

<body> <app>Loading ...</app> </body>

  1. La dernière étape est la définition des composants pour Navigation et Footer, comme le composant principal, qui pointe vers vos modèles partiels.
5
Thai Tran