AngularJS 1.3 is released after eight months of work with its stream of new features and improvements. Here is everything you need to know about this version written by more than 400 contributors!

At ContentSide, AngularJS has become a major part of our projects such as News' Innov, which is why we keep abreast of the various developments of this innovative technology, which is growing with each new version.

In this article we will look at some of the notable features of this version 1.3.

ngModelOptions

This feature completes the ngModel so dear to AngularJS. ngModelOptions allows us to add a custom list of events that will trigger and/or delay the model update thanks to :

updateOn: character string which specifies the event to which the update will be linked.
debounce: allows to specify the model update delay.
allowInvalid: Boolean value which indicates if the model can be updated by values which will not validate it correctly.
getterSetter: Boolean value which determines whether or not we can treat functions linked to ngModel as getters/setters.
timezone: Indicates the timezone to use for reading / writing the date in a date input.

Example: the update will take place 500ms after the input has lost focus.

<input ng-model="email" ng-model-options="{ updateOn: 'blur', debounce: {'blur': 500} }" type="text" >

$touched & $untouched

AngularJS 1.3 adds a new property to form validations. The ability to display errors when the input has had focus or when it has not yet had focus:

$touched: the input has had the focus
$untouced: has not yet had the focus

This message will be displayed if the user clicks on the input and moves on to another one without filling it in

<div ng-show="formInfo.email.$touched && formInfo.email.$invalid">E-mail requis</div>

$submitted

Another new addition is $submitted, which will allow us to display an information message if the form is submitted by the user

<div ng-show="formInfo.$submitted">Votre demande à bien était envoyée</div>

input[DATE]

We will also note the addition of the management of inputs[date] thanks to the functionalities offered by HTML5. AngularJS will now handle date-specific error handling allowing us to check if a submitted date is valid or if it corresponds to a given period as in the following example.

<input type="date" id="exampleInput" name="input" ng-model="value" placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required >
<span class="error" ng-show="formInfo.input.$error.required">Champ obligatoire</span>
<span class="error" ng-show="formInfo.input.$error.date">Date non valide</span>

ng-messages

AngularJS 1.3 is also the occasion to add a new module " ng-message " which will make it possible to display or hide an error message according to the key or value that it listens.

By default, only one message will be displayed at a time and this depends on the order of priority of the messages in the model (this can be changed using the NG-messages-multiple).

This module will simplify the writing of error messages

<span ng-show="formInfo.email.$error.required">E-mail requis</span>
<span ng-show="formInfo.email.$error.minlength">E-mail trop court</span>
<span ng-show="formInfo.email.$error.maxlength">E-mail trop long</span>

can be written as

<div ng-messages="formInfo.email.$error">
    <div ng-message="required">E-mail requis</div>
    <div ng-message="minlength">E-mail trop court</div>
    <div ng-message="maxlength">E-mail trop long</div>
</div>

ng-aria

A new module "ngAria" will improve the default accessibility of AngularJS. ngAria will allow us to automatically add ARIA attributes to our code, giving us the ability to create more accessible content for people with disabilities using screen readers.

<md-checkbox ng-disabled="disabled">

will automatically become

<md-checkbox disabled aria-disabled="true">

One time binding

AngularJS now gives the possibility to not use the famous two-way data binding by simply using :: before expressions and models.

This will avoid reloading all the fields in the view each time the $scope is modified.

<input ng-model="email" type="text" >
<div>Adresse mail : {{ ::email}}</div>

Même si la valeur est changé dans l’input l’affichage de notre {{ ::email}} ne changera pas

$watchGroup

Variant of $watch().
With this new $scope method, in the same way as with a $watch, we can now observe an array of values.

$scope.$watchGroup([value1, value2, value3], function(newVal, oldVal){
     As soon as a value is modified then newVal & oldVal will be updated
})

ng-strict-di

AngularJS 1.3 introduces this new directive to address issues with dependency injection.

AngularJS relies on names for injections, which is a problem if you are minifying your JS. As function parameters are often shortened to a random letter, it will then perhaps look for the $scope object but as this object does not exist, the dependency injection will fail.
To remedy this you can now simply add ng-strict-di next to your ng-app.

<div ng-app="myApp" ng-strict-di >...</div>

And it's not over yet

But that's not all, in addition to the various additions, AngularJS 1.3 brings various fixes and especially performance improvements.

These improvements reduce memory consumption, increase the speed of DOM operations and generally reduce the latency of your web application.

^{AngularJS 1.3 presentation slides}

There is one small downside to all this, IE8 is no longer supported which can be problematic if you need to ensure compatibility with it.

External links : 

"AngularJS 1.3.0 - superluminal-nudge

https://angularjs.blogspot.fr/2014/10/angularjs-130-superluminal-nudge.html