New Directives in AngularJS 1.3

In October 2013, AngularJS officially released version 1.3 and on top of that are discussions about significant changes in version 2,  which is a long way from production-ready so don’t even look into it.  I’m sure it will change several times considering that the feedback has been negative.  However 1.3 has a lot of positives which includes performance improvements, removed support for IE8, and new directives.  Here’s a basic summary:

  • One-time bindings
  • npm installer
  • ngModelOptions – tuning of model updates
  • ngMessages – form validity
  • ngARIA – Accessible Rich Internet Applications
  • No IE8 Support

One-time Bindings
Two factors that have improved performance are the “digest loop” and one-time bindings.  Many people wrote about poor performance when using many ng-models in previous versions.  Now you have finer control using ngModelOptions and one-time bindings using the double-colon (::) operator.

One-time bindings aka one-time expressions are easy to understand and only occur one time.  Normally an ng-model will continuously update itself during changes so with one-time bindings, I like to think of them like a event listener that gets immediately removed after its initial execution.  Here’s how one-time binding looks like in code:

One-time: {{ ::item.number + 1 }}

This would be identical to adding $scope.destroy() in your logic. It will be interpolated once, then no longer watched, thus freeing up resources.

 

NPM
The npm addition is simply allowing you to install AngularJS using the command-line. If you like CLI generators or use NodeJS often, this is for you.  Over 19,000 installs in the month of October.

 

ngModelOptions
The ngModelOptions directive is great for fine-tuning your output such as the ubiquitous autocomplete fields.  Previously you had to write additional logic for this because an ng-model would get updated on every key input, but now you can add options to wait for your user input field to fire the “onblur” event (when user click away from the current input field).   The second options here is the “debounce” which is a delay after keyboard event’s being fired.  Here’s a code snippet so you can get a better idea:

input ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }"

ngMessages
When you’re dealing with input validation there can be a huge variety of inputs and logic to improve user experience.  ngMessages now work with all html5 attributes with a corresponding ngModel object.  First you can access the status of an html form via myForm.myEmail.$error.  Other properties of the ngModel are $pristine, $dirty, $valid, and $invalid.  An excellent article with code on ngMessages has been published at the Year of Moo.

 

ngARIA
Accessibility to web content is a big deal especially for government agencies that have to comply with this.  Even Apple has continuously added more and more accessibility features to their products, but for the web it’s slightly different.  The AngularJS accessibility guide has provided detailed code on the topic of accessibility.  Please be sure to use it in your future AngularJS applications to support a wider audience.  Here are the properties of the new directive:

aria-checked
aria-valuemin
aria-valuemax
aria-valuenow
aria-invalid
aria-required

No More IE8 Support
Finally IE8, let’s take a moment and applaud AngularJS for keeping up with the trends not supporting the worst compatible browser.  Although they were still nice enough to include a guide in case you still have to support IE8.  This guide describes in brief and detailed versions of what needs to be done.  To summarize that guide, be sure to use polyfills for Object.create(), Object.getPrototypeOf(), JSON.stringify().  Also use ng-style tags instead of style=”{{ someCss }}.  You should also know that part of the reason is jQuery usage.  Since version 2.0 of the jQuery library, there is no more IE8 support. Yay!