How to Create Simple Header Directive in AngularJS

Header section will most probably come on every page in the app. We can have it as a partial file and include it in the page using ng-include or even hard code them in index page itself.

It works fine as long as you don’t need much more functionalities like login/register in it.

So its good idea to have a separate directive for the header.

In my case, I’ve directive and its controller in the same file itself.

function headerDirective() {
    return {
        bindToController: true,
        controller: HeaderController,
        controllerAs: 'vm',
        restrict: 'EA',
        scope: {
            controller: '='
        templateUrl: 'app/header.tpl.html'

    function HeaderController($scope) {
        console.log('Header is loaded');

angular.module('directives.header', [])
    .directive('header', headerDirective);

And on the index page, we have to call the directive.

<div header></div>

Don’t forget to have to** inject the module name**.