web-dev-qa-db-ja.com

AngularJsには部分テンプレートが含まれます

私はこれをメインのレイアウトファイルに入れました

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

ディレクトリ構造にheader.html部分テンプレートがあります。

このテンプレートをアプリに含める方法は？ angularは、コントローラーの処理後にテンプレートを自動的に含めると思いましたが、機能しません。

ヘッダーノードは、このファイルのコンテンツに置き換える必要があります。

angularjstemplatesincludepartial
53
user3403716

外部ファイルからテンプレート/ htmlフラグメントを含める1つの方法は、ng-includeディレクティブ（ doc ）を使用することです。

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

または

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

Angular 2から、ngIncludeは 削除 になり、カスタムディレクティブが優先されます。これが私が思いつく方法です

  1. マスターページにリンクするアプリのメインコンポーネントを定義する

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

そしてこれがメインテンプレートです

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

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

<!---- Footer ---->
<footer></footer>
<!----/ Footer ---->
  1. Bodyタグとappタグを含むbase.htmlを定義します

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

  1. さて、最後のステップは、部分テンプレートを指すMainComponentのようなNavigationおよびFooterのコンポーネントを定義することです。
5
Thai Tran