Getting MEAN: Angular Directives

One of the strong points of AngularJS is it’s ability to define custom directives and attributes.  In this section we will dive into this by moving our header into a custom directive and adding a sidebar.

Create git branch

As usual, we begin by creating a new branch:

lth@ncpws04:~/src/notes$ git branch directives 
lth@ncpws04:~/src/notes$ git checkout directives 
Switched to branch 'directives'

Header Directive

In our index.html we have got the following header defined:

 <header class="mb-3">                                                                                                                                                                                         
    <nav class="navbar navbar-dark bg-primary navbar-expand-md">                                                                                                                                              
        <a class="navbar-brand" href="/">Notes</a>                                                                                                                                                            
                                                                                                                                                                                                                      
        <button class="navbar-toggler" data-toggle="collapse" data-target="#headerbar-collapse">                                                                                                              
            <span class="navbar-toggler-icon"></span>                                                                                                                                                         
        </button>                                                                                                                                                                                             
                                                                                                                                                                                                                      
        <div id="headerbar-collapse" class="collapse navbar-collapse">                                                                                                                                        
            <ul class="navbar-nav">                                                                                                                                                                           
                <li class="nav-item">                                                                                                                                                                         
                    <a class="nav-link" href="/about">About</a>                                                                                                                                               
                </li>                                                                                                                                                                                         
            </ul>                                                                                                                                                                                             
        </div>                                                                                                                                                                                                
    </nav>                                                                                                                                                                                                    
</header>

We will cut this section and place it in a template file in views/app-header.html.  In the index.html, replace the section with a new custom directive:

<app-header/>

The final step will be to define the directive in AngularJS.  Create a new folder called directives:

lth@ncpws04:~/src/notes$ mkdir src/directives 
lth@ncpws04:~/src/notes$

In that folder, create a new JavaScript file called “app-header.directive.js”:

/* 
 * App Header Directive
 */ 
(function() { 
 
    var module = angular.module("app-header", []); 
 
    module.directive("appHeader", [ 
        function() { 
            return { 
                restrict: "E",  
                templateUrl: "views/app-header.html", 
            }; 
        } 
    ]); 
 
})();

 

Leave a Comment