How to include header and footer using Angularjs?

Question

In my projects i'm using jquery "load" method to inject the header and footer in all pages (ref the below code), here my question is how to achieve the same using angularjs.

$("header").load("includes/header.html");

$("footer").load("includes/footer.html");

Answer 1

You should use ngInclude directive. It fetches, compiles and includes an external HTML fragment.

Example

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

Answer 2

In your index.html or master page you can add

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

<div ui-view=""></div>  // here you can manage other views 


<div ng-include="'includes/footer.html'"></div>

For more references

http://docs.angularjs.org/tutorial/step_07