The ng-include Directive

The ng-include directive lets you include external HTML files into your main page — great for reusing headers, footers, and other components.

Basic ng-include

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

Important: The filename must be in single quotes inside double quotes because AngularJS evaluates it as an expression.

Dynamic Includes

app.controller('MainCtrl', function($scope) {
    $scope.currentView = 'home.html';

    $scope.changeView = function(view) {
        $scope.currentView = view;
    };
});

<button ng-click="changeView('home.html')">Home</button>
<button ng-click="changeView('about.html')">About</button>

<div ng-include="currentView"></div>

Example Files

<!-- header.html -->
<nav>
    <h2>My Website</h2>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>

<!-- footer.html -->
<footer>
    <p>&copy; 2024 My Website</p>
</footer>

Notes

• Included files must be served from a web server (not file://)
• The included template inherits the parent scope
• Use ng-include for simple cases — for complex apps, use routing or custom directives