20

I just read the introduction to Angular JS but I didn't see anything about a way to code up your HTML header code and footer code just once and have it included in all of your pages.

Is there an official/reccomended way to do this?

Greg
  • 45,306
  • 89
  • 231
  • 297

4 Answers4

35

If you are creating a single-page web application (say, with bookmarkable views/pages using $routeProvider), you can put your header and footer directly into index.html (or use ng-include) and then use ng-view to switch between views/pages:

<html ng-app>
<head>
   <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
   ... header here, or use ng-include ...
   <div ng-view></div>
   ... footer here, or use ng-include ...
</body>
</html>
Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
31

The official way to do it is to use ngInclude directive, which "fetches, compiles and includes an external HTML fragment".

<html ng-app>

<head>
  <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>

<body>
  <div ng-include src="'header.url'"></div>
  ...
  <div ng-include src="'footer.url'"></div>
</body>

</html>

With this you can reuse the same header.url and footer.url in all your pages.

mfathy00
  • 1,601
  • 1
  • 13
  • 28
raina77ow
  • 103,633
  • 15
  • 192
  • 229
  • 3
    With a small caveat:
    , and analogically for the footer:- Notice the '' around the header.url...     – honzajde Mar 24 '13 at 20:39
  • 1
    The problem with this is if the header contains HTML that has tags that doesn't close, because they are closed in the footer. This doesn't work because ng-include automatically closes tags if you did not do it. Another problem is if you want the header and footer to change, say for instance not be shown when you are on login or logout page. – Yngvar Kristiansen Jul 23 '14 at 11:29
  • 4
    Seems to me you shouldn't have tags opened in the header that you intend to close in the footer. You need to rethink that way of doing things. – eflat Jan 26 '15 at 18:56
10

I just found another way to include the same piece of code in multiples views :
=> create and use your own Angular 'directives'

1) define a directive :

angular.module('myApp')
  .directive('appfooter', function() {
    return {
      templateUrl: 'widgets/footer.html'
    };
  });

2) create your template called here 'widgets/footer.html'.
3) use your new directive :

<div appfooter></div>

References used :

hope this helps

boly38
  • 1,806
  • 24
  • 29
  • 1
    I wonder when it would be advantageous to use this method rather than ngInclude? – eflat Jan 26 '15 at 19:00
  • @eflat following http://stackoverflow.com/questions/22108719/ng-include-ng-template-or-directive-which-one-is-better-for-performance maybe ngInclude is best than directives. U right ;) – boly38 Jan 27 '15 at 10:29
  • On larger applications the directive approach makes the application more modular and the html cleaner and additional code could be encapsulated in the directive that relates to the header or footer, if required, therefore making it more extensible. I suppose it's personal choice and in most instances ng-include or including the header and footer in the index.html would suffice. – user1534980 Feb 03 '15 at 22:22
-5

I suggest you move your tag to the end of the page to improve app load times since the html loading is not blocked by angular

</head>
<body>
   <div ng-include src="header.url"></div>
   ...
   <div ng-include src="footer.url"></div>

   <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

</body>

Hendrix
  • 94
  • 4