Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Peter Smith
Peter Smith
12,347 Points

How do we manage headers and footers?

When making a website I usually use php to manager headers and footers - that is to say that I create a header.php and footer.php file and use include statements on all of my pages so that when i update the header.php or footer.php, all the pages are automatically changed.

Is there a better practice for doing this with JavaScript?

2 Answers

Christian Ebner
Christian Ebner
12,132 Points

Hi Peter,

if you are already on to learning javascript, a frontend framework would be a nice addition to your skillset. To be more specific - if you were to only use Javascript for the inclusion of static content - you could use a directive provided by the framework Angular.js (there may be other examples - my experience is limited to angular though) to include content in a similar fashion as your php include but you would not be required to use php.

Example from index.html:

```<div ng-include src="'../path/to/header/filename'"></div>

This would also give you the opportunity to develop your apps as single-page applications by using other custom directives and loading views dynamically. So you would actually only have one index.html with the whole header and footer markup in place. No need to include anything - you just change the view.

You can get a feeling for angularjs on their official website at https://angularjs.org/ and learn a lot by using the free introductory course in a similar learning style as used here at tth to learn about the stuff described above.
Peter Smith
Peter Smith
12,347 Points

Christian Ebner thats a great response. I don't know angular, however I'm learning jQuery and it has a .load method that I learned about since posting this question that will have the effect I was looking. Vanilla javascript could do the same using xmlhttprequest objects.