How to have a common header shared by all webpages in AngularJS?

Question

I would like to have a header.html which defines how the header for all my web pages will look like. How can I insert this header.html into the other web pages at the top?

There may be better methods around to achieve a common header to be shared around. As I still consider myself a newbie to html (but not to programming), I am open to better suggestions.

Thank you.

EDIT: Helpful replies have mentioned using PHP. However, I am using AngularJS as front-end and my PHP backend is simply a pure REST server. My preference is to do it the AngularJS way and not the PHP way.

this is the job of server-sided code, eg. in PHP, you'll have a header.php (or .html), and in index, or every page depending on how it's set up, you'll have something like `include('header.php');` — kennypu, May 03 '14 at 00:40
Look at my answer on [this](http://stackoverflow.com/a/18937678/2666313) question. — Milan and Friends, May 03 '14 at 00:45
Thanks for the tips on using PHP. However, I am using AngularJS as front-end and my PHP backend is simply a pure REST server. I need to do this the AngularJS way. — guagay_wk, May 03 '14 at 00:47

score 24 · Accepted Answer · edited May 23 '17 at 12:17

An AngularJS solution would look like this:

<!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>

The reason I did not simply advise a solution such as: <div ng-include="'header.html'"> is to avoid any delay in loading the header. For more information have a look at angularjs - Point ng-include to a partial that contains a script directive.

Alternatively a jQuery would like this.

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

Finally a PHP solution would look like this:

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

Best of luck learning!

Thanks! Another side question. I tested that `
` also works well. However, `
` does not. Why do I need to enclose that extra ' ' to header.html? By the way, I will use your solution if my header.html grows too big and load too slowly — guagay_wk, May 03 '14 at 01:11
Because angular is trying to find `$scope.header.html` instead of the string literal `header.html` — Tom, May 03 '14 at 01:12

score 7 · Answer 2 · answered May 03 '14 at 00:58

7

The way I typically handle this, and it allows for more than a header, is to have a shell.html

It might look like this:

<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>

Where you're ng-including the static bits, and you're using Angulars ngRoute (or ui-router)

answered May 03 '14 at 00:58

Tom

7,640
1
23
47

Thanks. Simple, elegant solution. – guagay_wk May 03 '14 at 01:14

score 7 · Answer 3 · answered May 03 '14 at 01:09

The other answers provided miss the point here of the client using Angular.js. Angular is actually designed for this concept. There are a couple different ways to achieve client templates with Angular.js.

Using Angular as a Single Page Application (SPA) where you dynamically change the content on a single HTML document rather than redirecting to different pages.
Using Angular Directives to encapsulate common page features.

You can use a combination of the 2 to achieve almost any combination of page layout.

using the angular route provider or a plugin like Angular UI-Router you can define a common HTML page, and within the HTML page use the ng-view directive to denote a section of your page to be dynamically replaced at runtime. you can then define html templates which populate the dynamic section.

Using Directives, you can create new HTML elements to design a more expressive page layout. For example, you could define a my-menubar directive containing HTML templates, javascript elements, even business logic, and then include the menubar on any page simply by using a syntax like <div my-menubar /> Directives are very powerful, and I highly recommend reading about them in the Angular Developer Guide.

An example of a simple page that might use these features:

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

Bottom line, you do not need a server to perform logic for reproducible code, as Angular.js is designed for exactly this purpose.

How to have a common header shared by all webpages in AngularJS?

3 Answers3

Linked