With the release of AngularJs 1.4 , the user can enjoy an improved performance with much more enhanced features. It primarily focuses on.

Animation – In Angular JS 1.4, the amalgamation of CSS and JS animations is made more flexible.
Performance – It implements a rewrite of the Angular expression parser and improvements to scope watching,the compiler,and the ngOptions attribute.

What’s Changed?

Animation (ngAnimate)

Animations in 1.4 have been refactored internally, but the API has remained the same.

$animateCss

In earlier versions of ngAnimate, CSS and JS animations would be run together when multiple annotations were detected.This feature has been removed and the same effect is achieved by injecting $animateCss.

$animate.on

Animation related callbacks are now on $animate.on

// < 1.4
element.on(‘$animate:before’, function(e, data) {
if (data.event === ‘enter’) { … }
});
element.off(‘$animate:before’, fn);// 1.4+
$animate.on(element, ‘enter’, function(data) {
//…
});
$animate.off(element, ‘enter’, fn);

$animate.enabled()

The function params for $animate.enabled() when an element is used are now flipped. This fix allows the function to act as a getter.

// < 1.4
$animate.enabled(false, element);
// 1.4+
$animate.enabled(element, false);

$scope.apply /$scope.digest

There is no need to call this inside animation promise callback since the promise is resolved within a digest automatically.

// < 1.4
$animate.enter(element).then(function() {
$scope.$apply(function() {
$scope.explode = true;
});
});
// 1.4+
$animate.enter(element).then(function() {
$scope.explode = true;
});

Forms

ngMessages

~ ngMessages directive supports ng-message-exp in Angular 1.4.

~ ng-messages-include attribute cannot be used in the same element containing ngMessages directive.

<!– AngularJS 1.3.x –>
<div ng-messages=”model.$error” ng-messages-include=”remote.html”>
<div ng-message=”required”>Your message is required</div>
</div>
<!– AngularJS 1.4.x –>
<div ng-messages=”model.$error”>
<div ng-message=”required”>Your message is required</div>
<div ng-messages-include=”remote.html”></div>
</div>

ngOptions

The ngOptions directive has also been refactored and as a result, some long-standing bugs have been fixed.

Select

In Angular 1.4.x the unknown option will be selected.To remedy this,you can simply initialize the model as a string.For this,you can simply initialize the model as a string or as a number.If you want to keep the model as a number,you can do the conversion via $formatters or $parsers on ngModel.

ngModelCtrl.$parsers.push(function(value) {
return parseInt(value, 10); // Convert option value to number
});
ngModelCtrl.$formatters.push(function(value) {
return value.toString(); // Convert scope value to string
});

Templating

ngRepeat

Alphabetic sorting can be removed from this version. Now it stays in the order they returned to the browser when running for the key in myObj.

ngCookies

$cookies no longer expose properties that represent the current browser cookie values.The new API on $cookies is as follows:

~get

~put

~getObject

~putObject

~getAll

angular.module(‘cookiesExample’, [‘ngCookies’])
.controller(‘ExampleController’, [‘$cookies’, function($cookies) {
// Retrieving a cookie
var favoriteCookie = $cookies.get(‘myFavorite’);
// Setting a cookie
$cookies.put(‘myFavorite’, ‘oatmeal’);
}]);

Service Requests($http)

Due to 5da1256, transformRequest functions can no longer modify request headers.Before this commit could modify request headers, ex.:

function requestTransform(data, headers) {
headers = angular.extend(headers(), {
‘X-MY_HEADER’: ‘abcd’
});
}
return angular.toJson(data);
}

How to do the migration to AngularJs 1.4?