AngularJs включают частичный шаблон

У меня есть это в моем основном файле макета

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

У меня есть частичный шаблон header.html в моей структуре каталогов.

Как включить этот шаблон в мое приложение? Я думал, что angular автоматически включает шаблон после обработки контроллера, но он не работает.

Заголовок узла должен быть заменен содержимым этого файла.

Источник

2 ответа

Решение

Одним из способов включения шаблонов / фрагментов HTML из внешних файлов является использование ng-include директива ( док).

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

или же

<div ng-include src="'/path/to/the/header.html'"></div>
Источник

От 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. Определить base.html, который будет содержать тег body и тег app

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

  1. Теперь, последний шаг - определение компонентов для Navigation а также Footer как MainComponent, которые указывают на ваши частичные шаблоны
Источник
Другие вопросы по тегам