AngularJS: Migration process Bitacora

We are considering migrate from AJS 1.2.4 to 1.4.7 or 1.4.8, main reason of 1.4+ is because I found it 1.4+ is the  most popular and stable these days, and based on the time of release it could be a good idea to update the version.

I found interesting investigate about features we need to cover: from 1.2.4 to 1.4.0 is a big jump. The guide that illustrates migration from 1.2 to 1.3 and 1.3 to 1.4 and then 1.4.1, 1.4.2, 1.4.3, 1.4.4, 1.4.5, 1.4.6, 1.4.7 and finally 1.4.8 based on Angular Documentation.

Here is a brief of that article, common problems we can found migrating the project and dealing with legacy code (most probably from old 1.0 version).

 

AngularJS Versions we are planning to cover:

Version History

 

Source:
https://code.angularjs.org/

Main Features 1.3 Version:
–Substantial performance and speed improvements: There was a big focus on performance, with a lot of internal optimisations. References to internal benchmarks give some impressive results.
–ES6 Style Promises
–angular-hint: helps us writing better Angular code and makes finding very common mistakes in our code base easier
–One-time bindings syntax
–ngAria
-$http: add xhr statusText to completeRequest callback
–ngMessages: introduce the NgMessages module and directives
–ngModelOptions: custom triggers and debounce of ngModel updates
–ngTouch: add optional ngSwipeDisableMouse attribute to ngSwipe directives to ignore mouse events.
-injector: strict-DI mode which disables automatic function annotation
-$scope: add $watchGroup method for observing a set of expressions
–No IE8 support anymore: IE8 is no longer supported.

To be aware:
-$controller will no longer look for controllers on window (following the Jhon Papa best practices we already cover this)
-You can no longer invoke .bind, .call or .apply on a function in angular expressions.
-The (deprecated) proto property does not work inside angular expressions anymor
-If you need Object.keys, make it accessible in the scope.
–promise unwrapping has been removed: $parseProvider.unwrapPromises and$parseProvider.logPromiseWarnings are gone.
-$interpolate:the function returned by $interpolate no longer has a .parts array set on it.
–angular.copy changes: that it applies the prototype of the original object to the copied object. Previously, angular.copy would copy properties of the original object’s prototype chain directly onto the copied object. This means that if you iterate over only the copied object’s hasOwnProperty properties, it will no longer contain the properties from the prototype.
–forEach: will iterate only over the initial number of items in the array. So if items are added to the array during the iteration, these won’t be iterated over during the initial forEach call.
–angular.toJson: If you expected toJson to strip these types of properties before, you will have to manually do this yourself now.
–jqLite: the jQuery detach() method does not trigger the $destroy event. If you want to destroy Angular data attached to the element, use remove().
-$compile (Directives): The isolated scope of a component directive no longer leaks into the template that contains the instance of the directive. This means that you can no longer access the isolated scope from attributes on the element where the isolated directive is defined, that’s to say, requesting isolate scope and any other scope on a single element is an error.
–ng-pattern: use a regular expression object as the value for the expression.

 

//before
$scope.exp = ‘/abc/i’;

//after
$scope.exp = /abc/i;

 

–NgModelController: replace $cancelUpdate() with $rollbackViewValue and has the same meaning
-$broadcast and $emit will now reset the currentScope property of the event to null once the event finished propagating: If any code depends on asynchronously accessing their currentScope property, it should be migrated to use targetScope instead.
–Testing: some deprecated features of Protractor tests no longer work:
  Prefixes ng_ and x-ng- are no longer allowed for models

 

// Before:
var el = element(by.binding(‘{{ foo }}’));

// After:
var el = element(by.binding(‘foo’));

 

and

 

//Before:
var el = element(by.binding(‘{{foo}}’));

//After:
var el = element(by.binding(‘foo’));

 

—

1.3 -> 1.4

 

Main Features 1.4.0:

The migration jump from 1.3 to 1.4 should be relatively straightforward.

 

-The new parser is easier to maintain and up to 25% faster
-The whole release has a clear feeling of getting us closer to what an app will look in AngularJS 2, by enforcing some practices.
-bug fixing (around 150)
-Fixes major animation issues
-Introduces a new API for ngCookies
–ngRouter -> UI-router (we are already using it)
–Improved animate: ngAnimate , $animateCss, imperative CSS-based animations, new callback and promises support and anchoring.
–Improved Forms: Dynamic ngMessages
–$cookies service: ngCookies module replaces $cookieStore with the new $cookies service.

 

var config = {
path: ‘/a/b’,
domain: ‘www.mywebsite.com‘,
expires: new Date(),
secure: true
};
$cookies.put(‘name’, ‘value’, config);
$cookies.putObject(‘name’, ‘value’, config);
$cookies.remove(‘name’, {path: ‘/a/b’});

 

Handle Objects 1.4+:

–angular.merge:

complements previous angular.copy and angular.extend. It does a deep copy of all properties from source to destination preserving properties in child objects. Note how we can also use multiple source objects that will be merged in order:

 

// angular.merge syntax (1.4+)
angular.merge(destination, source);
angular.merge(destination, source [, source]);

 

// 1.4+

var person1 = {

name: ‘John’,
address : {
description: ‘Oxford Street’
}
}
var person2 = {
id: 1,
address : {
postcode: ‘SW1’
}
}
var extended = angular.extend(person1, person2);
var merged = angular.merge(person1, person2);

Result:

//extended object

{
id: 1,
name: ‘John’,
address : {
postcode: ‘SW1’
}
}
// merged object
{
id: 1,
name: ‘John’,
address : {
description: ‘Oxford Street’,
postcode: ‘SW1’
}
}

-limitTo:

filter can now take a second argument to indicate the beginning index, defaulting to 0 if not provided. If the index is negative, it will start from the end:

angular.module(‘limitToApp’, [])
.controller(‘MainCtrl’, function(){
this.letters = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’];
});

 

Using the limit filter on letters will output the following:

{{vm.letters | limitTo:2}} // [a, b]
{{vm.letters | limitTo:2:0}} // [a, b]
{{vm.letters | limitTo:2:1}} // [b, c]
{{vm.letters | limitTo:2:-1}} // [f]
{{vm.letters | limitTo:-2:-1}} // [d, e]

 

–ngOptionDisable:

A very old request was the ability to disable an option in a select, and there was no way to do it until this release. Now, you can dynamically specify if an option should be disable

 

<select ng-model=”modelTest”
ng-options=”customer for customer in customers”>
</select>

 

//Second fav:

<select ng-model=”secondFav”
ng-options=”customer disable when is modelTest(customer) for customer in customers”>
</select>

 

–Timezones in date filter:

<p>UTC -> date | date:'short':'UTC'</p>
<p>Paris -> date | date:'short':'GMT+0200'</p>
<p>Auckland -> date | date:'short':'GMT+1300'</p>

 

-$timeout and $interval:

These two services can now receive additional arguments in their callbacks, to reflect what you can do natively in the browser. So if you want to pass a parameter to the callback function of $interval or $timeout, you can now do:

var sayHello = function(param){
console.log(‘Hello ‘ + param); };
$timeout(sayHello, 1000, true, ‘world!’); // Hello world!
};

 

Testing:

–ngMock:
A nice addition to the test module are the new methods:

+ they (allowing to repeat a test over a collection of values),
+ tthey (run only this test)
+ xthey (exclude this test).

 

Examples:

it(“should test with admin”, function(){
var user = admin;
// test with admin
});
it(“should test with user”, function(){
var user = user;
// test with user
});
it(“should test with pass”, function(){
var user = pass;
// test with pass
});

 

They:

they(“[1] Testing should $prop”, {admin: admin, user: user, pass: pass},
function(user){
// will test 3 times, with user being admin, then user, pass
});

 

–ngMessageFormat: Internationalization native

-filterFilter: allow array like objects to be filtered

 

—

1.4.0 -> 1.4.8

 

1.4.1 Improvements

• $compile:
  • workaround for IE11 MutationObserver
  • prevent exception when using watch as isolated scope binding property in Firefox
  • assign controller return values correctly for multiple directives
• $location: do not get caught in infinite digest in IE9 when redirecting in $locationChangeSuccess
• $parse: set null reference properties to undefined
• $sanitize: do not remove tabindex attribute
• copy: do not copy the same object twice
• forms: parse exponential notation in numberInputType directive
• linky: allow case insensitive scheme detection
• ngAria:
  • update aria-valuemin/max when min/max change
  • ensure boolean values for aria-hidden and aria-disabled
• ngModel: ignore Object.prototype properties on the form validation object
• $compile: avoid jquery data calls when there is no data
• ngOptions:
  • do not watch properties starting with ‘ $ ‘
  • use reference check only when not using trackBy

1.4.2 Improvements

• $browser: prevent infinite digest if changing hash when there is no hashPrefix
• $compile:
  • throw error when requesting new and isolate scopes (async)
• $location: allow navigating outside the original base URL
• merge: treat dates as atomic values instead of objects.
• ngOptions: only watch numeric properties of an array
• orderBy: ensure correct ordering with arrays of objects and no predicate
• ngAria: add option to disable role=button

1.4.3 Improvements

• $animateCss: ensure animations execute if only a keyframeStyle is provided
• loader: define isFunction (like: angualr.isFunction thing)
• ngAnimate: ensure that orphaned elements do not throw errors when animated

 

1.4.4 Improvements

• $animate:
  • leave animation callback should not overridden by follow-up animation
  • make sure to run a post-digest reflow for parentless animations
  • ensure that class-based animations are properly applied when cancelled
• $animateCss: make sure that skipBlocking avoids the pre-emptive transition-delay styling
• $compile:
  • don’t trigger $observer if initial value is undefined
  • ignore optional =-bound properties with empty value
• $injector: Allows ES6 function syntax
• $location: don’t crash if navigating outside the app base
• $q: Use extend to avoid overwriting prototype
• $rootScope: don’t clear phase if $apply is re-entered
• Angular: allow unescaped = signs in values in parseKeyValue
• httpParamSerializerJQLike: Follow jQuery for index of arrays of objects
• i18n: by default put negative sign before currency symbol
• injector: check that modulesToLoad isArray.
• input: Firefox validation trigger
• merge: regExp should not be treated as a objects when merging.
• ng/$locale: by default put negative sign before currency symbol
• ngAnimate:
  • always apply a preparation reflow for CSS-based animations
  • ensure that only string-based addClass/removeClass values are applied
  • ensure that parent class-based animations are never closed by their children
  • allow animations on body and root elements
  • $timeout without invokeApply
• ngCsp: allow CSP to be configurable
• ngModel: correct minErr usage for correct doc creation
• ngOptions: allow empty option selection with multiple attribute
• ngSanitize: escape the wide char quote marks in a regex in linky.js
• $q: small $q performance optimization
• $q when writing tests, there is no need to call $timeout.flush() to resolve a call to $q.when with a value.
• ngAnimate: CSS classes added/removed by ngAnimate are now applied synchronously once the first digest has passed.

1.4.5 Improvements

• $animate: $animate.enabled(false) should disable animations on $animateCss as well
• $animateCss:
  • do not throw errors when a closing timeout is fired on a removed element
  • fix parse errors on older Android WebViews
  • properly handle cancellation timeouts for follow-up animations
  • ensure failed animations clear the internal cache
  • the transitions options delay value should be applied before class application
• ngAnimate:
  • use requestAnimationFrame to space out child animations
  • only buffer rAF requests within the animation runners
• ngModel: validate pattern against the viewValue
• ngResources: support IPv6 URLs

 

1.4.6 Improvements

• $animate: invalid CSS class names should not break subsequent elements
• $browser: handle async updates to location
• $http: propagate status -1 for timed out requests
• $httpBackend: send null when post-data is undefined
• $parse:
  • throw error when accessing a restricted property indirectly
  • assign returns the new value
• angular.copy: support copying XML nodes
• form, ngModel: correctly notify parent form when children are added
• input: ignore min/max if they are empty on all input types
• ngAnimateMock: $animate.flush should work for looping animations
• ngAria: clean up tabindex usage
• ngJq: properly detect when ng-jq is empty
• ngModel:
  • remove reference to parentForm from removed control
  • let aliased validator directives work on any element
• ngRepeat: add support to iterate an object’s properties even if it does not inherit from Object
• rootScope: add support for watchCollection to watch an object which does not inherit from Object
• select: update option if interpolated value attribute changes
• toDebugString: change replacement string

1.4.8 Bug Fixes

• $animate: ensure leave animation calls close callback
• $cacheFactory: check key exists before decreasing cache size count
• $compile:
  • bind all directive controllers correctly when using bindToController
  • evaluate against the correct scope with bindToController on new scope
  • fix scoping of transclusion directives inside replace directive
• $http: apply transformResponse even when data is empty
• $location: ensure $locationChangeSuccess fires even if URL ends with #
• $parse: evaluate once simple expressions only once
• $resource: allow XHR request to be cancelled via a timeout promise
• $rootScope: prevent IE9 memory leak when destroying scopes
• Angular.js: fix isArrayLike for unusual cases
• isArrayLike: handle jQuery objects of length 0
• jqLite:
  • deregister special mouseenter / mouseleave events correctly
  • ensure mouseenter works with svg elements on IE
• limitTo: start at 0 if begin is negative and exceeds input length
• merge:
  • ensure that jqlite->jqlite and DOM->DOM
  • clone elements instead of treating them like simple objects
• ngAria: don’t add tabindex to radio and checkbox inputs
• ngInput: change URL_REGEXP to better match RFC3987
• ngMock: reset cache before every test
• ngOptions:
  • skip comments and empty options when looking for options
  • override select option registration to allow compilation of empty option

Performance Improvements

• $compile: use static jquery data method to avoid creating new instances
• copy:
  • avoid regex in isTypedArray
  • only validate/clear if the user specifies a destination
• merge: remove unnecessary wrapping of jqLite element

 

—

Migrating from 1.4.8 to 1.5.0+:

Angular 1.5 takes a big step towards preparing developers for a smoother transition to Angular2 in the future.

Architecturing your applications using components, multi-slot transclusion, one-way bindings in isolate scopes, using lifecycle hooks in directive controllers and relying on native ES6 features.

Because we have no plans to move to Angular 2 maybe this is not an step we want to make.

—

Sources:

If you would like to analyze or read these changes in more detail, please refer to the Google AngularJS changelog and some others IT blogs:

http://angularjs.blogspot.co.uk/

https://docs.angularjs.org/guide/migration#migrating-from-1-3-to-1-4

http://blog.thoughtram.io/exploring-angular-1.3/