Dynamic Footer with AngularJS and WordPress

Table of Contents:

  1. Introduction
  2. More Pages
  3. Create a Footer Directive
  4. Bind to Our View
  5. Summary
  6. Other Posts in this Series

Introduction

In part 1 through 5 of this AngularJS and WordPress series we wired up a Yeoman AnguarJS app to a WordPress back-end, set up a catch-all route, controller and view that could fetch our WordPress pages dynamically and created a dynamic, responsive navigation and a dynamic sitemap page.

In part 6 I will show you how to reuse that sitemap data to create a dynamic footer which links to all the page that don’t render in the navigation by default.

More Pages

If we were to implement this solution on our current sitemap, we’d only have two pages; the home page and the sitemap page. Another good candidate for this sort of footer navigation is a privacy policy.

  1. Make a new page in WordPress called Privacy Policy, at the the path /privacy-policy.
  2. In the sitemap-json page, add the new entry after sitemap:
    ...
    {"name":"Sitemap","path":"/sitemap","navigation":false},
    {"name":"Privacy","path":"/privacy-policy","navigation":false}
    ...
    

yo-angular-sitemap-json

Create a Footer Directive

  1. In the terminal, enter the command:
    yo angular:directive footer
    

    This will create a new directive at app/scripts/directives/footer.js

  2. Open app/index.html and remove the boilerplate footer:

    <div class="footer">
        <div class="container">
            <p><a href="/sitemap" title="my app sitemap">Sitemap</a></p>
        </div>
    </div>
    

    And replace it with this:

    <footer></footer>
    
  3. Open app/scripts/directives/footer.js and inject the sitemapService:
    ...
    .directive('footer', function (sitemapService) {
      return {
    ...
    
  4. Next replace the boilerplate postLink code with the following (this is exactly what we did in the navigation directive):
    link: function postLink(scope, element, attrs) {
        scope.sitemap = sitemapService.get();
        scope.$on('sitemap:updated', function (event, data) {
            scope.sitemap = data;
        });
    }
    

Bind to Our View

In this case, we’re keeping the view (template) tied to our directive instead of importing html from another file.

  1. In app/scripts/directives/footer.js, replace the boilerplate template markup with an escaped version of what we removed earlier from app/index.html:
    template: '<div class="footer">\
        <div class="container">\
            <p><a href="/sitemap" title="my app sitemap">Sitemap</a></p>\
        </div>\
    </div>',
    
  2. Now we need to iterate through our sitemap object with an ng-repeat and create links for all the non-navigation (“navigation”:false) items in our sitemap:
    template: '<div class="footer">\
        <div class="container">\
            <p><span ng-repeat="link in sitemap" ng-if="!link.navigation"></span></p>\
        </div>\
    </div>',
    
  3. Within each repeated span tag, we need to have a link to the page in question, with an ng-href, an ng-attr-title and an ng-bind:
    template: '<div class="footer">\
        <div class="container">\
            <p><span ng-repeat="link in sitemap" ng-if="!link.navigation"><a ng-href="{{ link.path }}" ng-attr-title="{{ link.name }}" ng-bind="link.name"></a></span></p>\
        </div>\
    </div>',
    
  4. And finally, we want to append each element with a pipe to divide them, but not append the $last item:
    template: '<div class="footer">\
        <div class="container">\
            <p><span ng-repeat="link in sitemap" ng-if="!link.navigation"><a ng-href="{{ link.path }}" ng-attr-title="{{ link.name }}" ng-bind="link.name"></a><span ng-if="!$last"> | </span></span></p>\
        </div>\
    </div>',
    

yo-angular-dynamic-footer

Summary

In this post we created a dynamic footer, using a footer directive and reusing the sitemap object from a service we created in part 3. We then bound the non-navigational items in our sitemap to our footer directive template.

Other Posts in this Series

 

Adam Merrifield

 

Leave a Reply