Angular — What’s in Angular 1.3 for me?

Angular 1.3 was out last October! You probably have been too busy to play with it, no worries, you can start here. This is a basic introduction to start playing with some of the new features.

These are the main additions:

1. one-time bindings — one-time expressions that are only interpolated once
2. ngAria — new module for accessibility
3. ngMessages — to ease forms feedback
4. ngModelOptions — a new directive to configure when you want to update the ng-model
5. ng-hint — a new directive to improve the debugging experience

Let’s take a brief look at them.

1. One-time bindings

One common complaint about Angular is the costly dirty-checking digest cycle and, as a consequence, the accumulation of watchers as the application grows. Now we can spare some watchers improving the overall performance using one-time bindings. This is the basic syntax:

::<expression>

Some examples:

Improve your application performance replacing two-way bindings with one-time bindings when possible

You can play with this jsbin showing both two-way and one-time bindings.

2. ngAria

This is a module that you can include in your applications to support common ARIA attributes for users using assistive technologies like screen readers. A good starting point is “Using ngAria” by Marcy Sutton.

3. ngMessages

This module improves forms feedback saving you some keystrokes handling repetitive data entry logic. You can use fancy animations using ngAnimate too.

This module lives into a separated file so you will have to add the script file and the corresponding dependency.

A basic setup for a field would be the following.

The directive checks for the object defined in ng-messages and shows or hides the messages depending on the matching properties.

If we wanted to look into the $error object it would look like this

ngModel mantains the $error object

You can play with this jsbin showing a new subscriber email validation.

4. ngModelOptions

This is a new directive that allows you to decide how model updates are done. You can decide which events will trigger an update and/or specify a debouncing delay. The basic syntax looks like:

This is particularly handy for search fields so you don’t query the backend with each keystroke.

Check this jsbin showing a basic filter search using different settings.

5. ng-hint

Angular hint is a new module to improve the debugging experience and gives out hints to follow current best practices.

The setup is pretty simple. You have to include the module file.

And then apply the directive to the body element

It can also be applied on the html element

In order to see the hints you have to access the console, accessible from the Developer Tools.

If you live in London, next Tuesday 9th-Dec we are going to hack on the new Angular 1.3 features. Please feel free to join us! Details here.

Resources

• “Angular 1.3.0 — let’s talk about changes”, by Michał Miszczyszyn