Simple AngularJS Directive Copyright Year

Last week, one of my favorite bloggers wrote this little diddy in jQuery.  And though I list “Angular Ninja” on my LinkedIn profile that is more jest than reality.

Therefore I thought it a good exercise to take what was written here at Maff Rigby’s website and do me some learnin’ about AngularJS Directives.

I like to have a bit-o-fun with with my code samples which might explain the title of my login form. 🙂

To skip right to the juicy-bits in case you just came here to nab some code.  Here is the simple directive I came up with.

  angular.module('app')
    .directive('customCopyright', function () {
    var val = new Date().getFullYear();
      return {
        restrict: 'A',
        template: '© Copyright ' + val + ' All rights reserved.'
      };
  });

I also threw together a simple app.js for my controller to use in the html page.

angular.module('app', [])
    .controller('myController', function($scope) {
    $scope.appTitle = 'MegaUltraCorp Secure Login';
  });

And then I came up with some simple HTML to test it all out. All you have to do is add the attribute ‘custom-copyright’ to say a ‘div’ tag. I like to pre-pend directives with ‘data’ like so.

data-custom-copyright

Then, if you’ve used directives like this before it will come as no shock to you that you’ll see:

© Copyright 2015 All rights reserved.

Thanks to Maff Rigby for the idea on this blog post.  He writes a good blog and you should check it out here.