Angularjs basic footer directive example

Sam Deering Sam Deering Angular Directives Tips

So you want to add a footer to your angular SPA app? So it is best to go about it? Maybe add it directly into the main page template, maybe include it as a partial template, or even create a directive linked to a controller and template? I guess you need to look at your footer’s content and functionality. If it’s just links probably go with a partial template nginclude. If there is more functionality then maybe it needs its own controller? I wanted some little feedback buttons on my footer so i’ve gone with a directive controller approach.

This is what it looks like:

Image

footer_directive.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
 
angular.module("app").directive("footer", function() {
  return {
    restrict: 'A',
    templateUrl: 'partials/footer.html',
    scope: true,
    transclude : false,
    controller: 'FooterController'
  };
});
 

partials/footer.html

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<div id="footer" class="container">
    <footer class="text-left">
 
        <div class="row">
            <div class="col-md-8">
               <ul class="footer-links">
                <li><a href="/freecoins">Free</a></li>
                <li><a href="/recent">Recent</a></li>
                <li><a href="/ethics">Ethics</a></li>
                <li><a href="/rules">Rules</a></li>
                <li><a href="/privacy">Privacy</a></li>
                <li><a href="/cookies">Cookies</a></li>
                <li><a href="/terms">Terms</a></li>
                <li><a href="/help">Help</a></li>
                <li><a href="/support">Support</a></li>
               </ul>
            </div>
 
            <div id="feedback" class="col-md-4">
                <a href=""><span class="glyphicon glyphicon-thumbs-down" title="Give us feedback Sad"></span></a>
                <a href=""><span class="glyphicon glyphicon-thumbs-up" title="Give us feedback Happy"></span></a>
            </div>
        </div>
 
       <div class="row disclaimers">
           <p>Copyright 2014</p>
       </div>
 
    </footer>
</div>
 

footer_controller.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
angular.module("app").controller("FooterController", function ($scope) {
 
    $scope.submitFeedback = function(action) {
        //good or bad...
        if (action) {
            //good
 
            //submit using $http or service
 
        }
        else {
            //bad
 
            //submit using $http or service
        }
    }
 
});
 

index.html

JavaScript
1
2
3
 
<div footer></div>
 

View Demo

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

One thought on “Angularjs basic footer directive example”

Leave a Reply

Your email address will not be published. Required fields are marked *