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:
footer_directive.js
|
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
|
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
|
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
|
1 2 3 |
<div footer></div> |