Use the declarative nature of AngularJS for fun and profit

Published 25/11/2013

In one Google talk, Miško Hevery mentions that they wanted Angular to be used by designers. That statement can be dismissed easily. Angular is a complex beast and most people require a fair amount to get productive with it. I can easily imagine many a jQuery savvy web designer diving into Angular and getting quickly out of their comfort zone.

But when recently refactoring a non-trivial directive, I found those first steps can go a long way. The key is the usage of the declarative nature of AngularJS; using the building blocks of the framework to extend HTML.

<script type="text/ng-template" id="error_notify.html">  
  <span
    class="input__error-message input__error-message--left"
    ng-show="anyInvalid()"
    ng-class="{ 'input__error-message--hint': isHint() }"
    ng-transclude>
      {{ getErrorMsg() }}
    </span>
</script>  

Looking at the template, we might not know how something happens, but we know what happens and, what is quite important in building interfaces, we can decide how it will look like.

<error-notify fields="phone" hint-min-length="5"></error-notify>  

This gives us a good amount of testability, abstraction, reusability and general high fives. The above template could be modified really a lot before you would have to dig in into the meat of the directive.

This gives us tremendous power*; something that we really need in building fantastic, responsive interfaces easily across web development teams with varying skillsets.

* But remember kids, with great power comes great responsibility!