Как добавить заголовок на каждой странице в Angular js

Я пытаюсь включить html page (например, заголовок), но я не могу заставить включить работать. Я хочу создать такую страницу, как header and footer, и хочу, чтобы эти страницы отображались на каждой странице html в приложении, как и в PHP. Мы создаем страницу и включаем ее, используя include or require.Как добавить заголовок на каждой странице в Angular js

Как, если у меня есть следующие строки кода

<!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 page.I не хочет, чтобы написать эти строки на каждой странице.

Возможно ли это сделать в Angular js, используя ng-include или что-то еще.

Я попробовал этот

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

Если я использую ng-include его включают только некоторые кусок кода в div. Но как я могу использовать его как верхний и нижний колонтитулы для включения на каждую страницу.

источник

2015-10-28 Sunil Pachlangia

Что означает 'только включение некоторой части кода в div? Использование 'ng-include' должно работать нормально. Должен обновить ваш '' BTW – charlietfl

@charlietfl Я знаю, что он содержит полный код, но я хочу создать заголовок и который он не может включить в DIV –

, который не имеет никакого смысла – charlietfl

Для общих шаблонов вы должны использовать ngRoute & ngView: иметь html-страницу, лежащую на вашем базовом сайте, включает представление, которое ngRoute заполняет определенным контентом в зависимости от URL-адреса.

источник

2015-10-28 13:10:56 Aaron

Невозможно получить то, что именно вы пытаетесь сказать. –

@SunilPachlangia вы должны проверить [этот пример] (https://docs.angularjs.org/api/ngRoute/service/$route#example), в котором они загружают другой контент, но сохраняют одно и то же меню на каждой странице. вместо того, чтобы включать меню повсюду, вместо этого у них есть единственная страница, содержащая их шаблон (меню здесь), который будет содержать различный контент в зависимости от того, какую ссылку вы нажали. – Aaron

Попробуйте ng-view и routeProvider, чтобы заполнить ng-view. Как показано здесь:

http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/

Таким образом, в общем то, что будет происходить в том, что вы будете иметь index.html будет иметь некоторую статическую часть и некоторые динамические HTML часть кода. Статическая часть будет вашим верхним и нижним колонтитулом, а динамическая часть будет контролироваться ng-view и routeProvider.

Статическая часть останется неизменной на каждой странице.

источник

2015-10-28 13:17:38 ArslanW

Как правило, 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.

источник

2015-10-28 13:32:18 awimley

Как добавить заголовок на каждой странице в Angular js

ответ

Смежные вопросы