Как иметь общий заголовок, общий для всех веб-страниц в AngularJS?

Я хотел бы иметь заголовок .html, который определяет, как будет выглядеть заголовок для всех моих веб-страниц. Как я могу вставить этот header.html в другие веб-страницы вверху?

Там могут быть лучшие методы для достижения общего заголовка, который будет использоваться совместно. Поскольку я все еще считаю себя новичком в html (но не для программирования), я открыт для лучших предложений.

Спасибо.

EDIT: полезные ответы упомянули с помощью PHP. Тем не менее, я использую AngularJS в качестве front-end, а мой PHP-сервер - просто чистый сервер REST. Мое предпочтение - сделать это способом AngularJS, а не способом PHP.

Ответы

Ответ 1

Решение AngularJS будет выглядеть так:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <script src='angular.js'></script>
  <script src='main.js'></script>
</head>
<body>
<div ng-controller="HeaderCtrl">
  <div ng-include src="header.url"></div>
  <script type="text/ng-template" id="header.html"></script>
</div>
</body>
</html>

main.js:

var myApp = angular.module('myApp', []);

function HeaderCtrl($scope) {
    $scope.header = {name: "header.html", url: "header.html"};
}

header.html:

<p> Header content goes here </p>

Причина, по которой я не просто советовал решение, такое как: <div ng-include="'header.html'"> - это избежать любой задержки при загрузке заголовка. Для получения дополнительной информации см. angularjs - Point ng-include для частичного, содержащего директиву script.

В качестве альтернативы jQuery вам понравится.

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#headerContent").load("header.html"); 
    });
    </script> 
  </head> 
  <body> 
     <div id="headerContent"></div>
  </body> 
</html>

Наконец, решение PHP будет выглядеть так:

<html> 
  <head> 
  </head> 
  <body> 
    <?php include('header.html'); ?>  
  </body> 
</html>

Желаем удачи!

Ответ 2

Другие предоставленные ответы пропустят точку здесь клиента, используя Angular.js. Angular действительно предназначен для этой концепции. Существует несколько способов достижения клиентских шаблонов с помощью Angular.js.

  • Использование Angular в качестве приложения с одной страницей (SPA), где вы динамически меняете контент в одном документе HTML, а не перенаправляете на разные страницы.

  • Использование Angular Директив для инкапсуляции общих функций страницы.

Вы можете использовать комбинацию из 2 для достижения практически любой комбинации макета страницы.

используя angular поставщик маршрутов или плагин, например angular UI-Router, вы можете определите общую HTML-страницу, а на странице HTML используйте директиву ng-view для обозначения динамической замены раздела вашей страницы во время выполнения. вы можете определить html-шаблоны, которые заполняют динамический раздел.

Используя директивы, вы можете создавать новые HTML-элементы для разработки более выразительного макета страницы. Например, вы можете определить директиву my-menubar, содержащую HTML-шаблоны, элементы javascript, даже бизнес-логику, а затем включить строку меню на любую страницу, просто используя синтаксис типа <div my-menubar />. Директивы очень эффективны, и я настоятельно рекомендую прочитать их в angular Руководство разработчика.

Пример простой страницы, которая может использовать эти функции:

<div ng-controller=MainController>
    <div main-menu />
    <div ng-view> </div>
    <div page-footer />
</div>

В нижней строке вам не нужен сервер для выполнения логики для воспроизводимого кода, так как Angular.js предназначен именно для этой цели.

Ответ 3

Как я обычно справляюсь с этим, и он позволяет больше, чем заголовок, должен иметь shell.html

Это может выглядеть так:

<div ng-controller="ShellController">
  <div ng-include="'app/shell/header/header.html'"></div>
  <div ng-view></div>
  <div ng-include="'app/shell/footer/footer.html'"></div?>
</div>

Где вы ng-including статические биты, и вы используете Angulars ngRoute (или ui-router)