AngularJs enthalten teilweise Vorlage

Ich habe in meinem Haupt-layout-Datei

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

Habe ich eine header.html partielle template in mein Verzeichnis Struktur.

Wie diese Vorlage in meine app? Ich dachte, eckig, beinhaltet automatisch die Vorlage nach der Verarbeitung der controller, aber es funktioniert nicht.

Dem header-Knoten der ersetzt werden sollte mit dem Inhalt dieser Datei.

InformationsquelleAutor der Frage user3403716 | 2014-03-11

  1. 86

    Einer Weise, einschließlich Vorlagen/html-Fragmente aus externen Dateien ist die Verwendung der ng-include - Richtlinie (doc).

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

    oder

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

    InformationsquelleAutor der Antwort Suvi Vignarajah

  2. 5

    Vom Angular 2ngInclude wurde entfernt und benutzerdefinierten Richtlinien werden bevorzugt. Dies ist der Weg, den ich kommen mit

    1. Definieren Sie die Haupt-Komponente für Ihre app, die den link zu der master-Seite 

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

    - Und dies ist die wichtigste Vorlage 

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

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

<!---- Footer ---->
<footer></footer>
<!----/Footer ---->
    1. Definieren base.htmlenthält das body-tag und das app-tag

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

    1. Nun, der Letzte Schritt ist die Definition der Komponenten für Navigation und Footer wie die MainComponent, die zu Ihrer partiellen Vorlagen

    InformationsquelleAutor der Antwort Thai Tran

Schreibe einen Kommentar