Как добавить заголовок на каждую страницу в Angular JS
Я пытаюсь включить html page (как в заголовке), но я не могу заставить включиться работать.
Я хочу создать страницу как header and footerи хотим, чтобы эти страницы включались в каждую html-страницу приложения, как мы это делаем в PHP, Мы создаем страницу и включаем ее, используя include or require,
Например, если у меня есть эти строки кода
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angular Demo</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css.map">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<script src="js/jquery-2.1.4.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>
</head>
Теперь я хочу включить эти строки на каждую страницу HTML. Я не хочу писать эти строки на каждой странице.
Можно ли сделать это в Angular JS с помощью ng-include или что-то другое.
Я пробовал это
<div ng-include src="'include/header.html'"></div>
Если я использую ng-include он включает в себя только часть кода в div, Но как я могу использовать его как верхний и нижний колонтитулы для включения на каждой странице.
Решение
Для общих шаблонов вы должны использовать ngRoute & ngView: добавьте html-страницу вашего базового сайта, включите представление, которое ngRoute заполняет конкретным контентом в зависимости от URL.
Другие решения
Попробуйте ng-view и routeProvider, чтобы заполнить ng-view. Как показано здесь:
http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/
Так что в общем случае у вас будет index.html, в котором будет некоторая статическая часть и некоторая динамическая HTML-часть кода. Статическая часть будет вашим верхним и нижним колонтитулами, а динамическая часть будет управляться ng-view и routeProvider.
Статическая часть останется неизменной на каждой странице.
Обычно angularJS обрабатывает такое поведение с помощью директив. Пример директивы заголовка HTML:
<div id="banner" class="page-header">
<div class="row text-center">
<div class="col-lg-10"></div>
<h3> {{ content.title }} </h3>
<small>{{ content.strapline }}</small>
</div>
</div>
Пример директивы заголовка файла javascript:
(function () {
angular
.module('flightApp')
.directive('pageHeader', pageHeader);
function pageHeader () {
return {
restrict: 'EA',
scope: {
content : '=content'
},
templateUrl: '/common/directives/pageHeader/pageHeader.template.html'
};
}
})();
Вы должны включить это в свой индексный файл. Вам не нужно включать HTML, JS в директиве будет ссылаться на ваш HTML-файл, поэтому просто добавьте это в ваш index.html:
<script src="/common/directives/pageHeader/pageHeader.directive.js"></script>
Я передаю в атрибут содержимого на HTML. Это может быть связано с родительскими переменными области видимости:
<page-header content="vm.header"></page-header>
Где в вашем родительском контроллере вы определяете переменную vm.header:
vm.header = {
title : 'Flight App (angular edition!)',
strapline: ''
};
И теперь у вас есть многократно используемый универсальный элемент заголовка! Вы можете определить верхние или нижние колонтитулы таким способом в одной строке, и вы можете изменить содержимое в зависимости от того, где находится директива и что ее использует. Если у вас есть какие-либо проблемы с этим, просто дайте мне знать. Поначалу директивы несколько сбивают с толку, но становятся очень мощным инструментом, когда вы знакомитесь с AngularJS.