AngularJS-Shield-large

Notes about AngularJS Migrate from 1.2 to 1.4

AngularJS: Migration process Bitacora

First Step
1.2 -> 1.3

I was considering migrate from AJS 1.2.4 to 1.4.0, reason 1.4 is because I found it the most popular and stable this days, but it could potentially be 1.4.5 or even a new one.

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 on Angular Documentation. Here is my brief of that article, common problems I found, and my experiences migrating my project and dealing with legacy code (most probably from 1.0 version).

AngularJS Versions we need to cover::
Version Downloads Last updated
Angular JS 1.4.0 17546 Thursday, May 28 2015
Angular JS 1.4.0-rc2 647 Thursday, May 14 2015
Angular JS 1.4.0-rc1 905 Sunday, April 26 2015
Angular JS 1.4.0-rc0 621 Saturday, April 11 2015
Angular JS 1.4.0-beta6 1204 Thursday, March 19 2015
Angular JS 1.4.0-beta5 778 Thursday, February 26 2015
Angular JS 1.4.0-beta4 630 Tuesday, February 10 2015
Angular JS 1.4.0-beta3 225 Thursday, February 05 2015
Angular JS 1.4.0-beta1 907 Thursday, January 22 2015
AngularJS 1.3.18 44 Sunday, September 06 2015
AngularJS 1.3.17 12 Sunday, September 06 2015
AngularJS 1.3.16 773 Sunday, June 07 2015
AngularJS 1.3.15 49717 Thursday, March 19 2015
AngularJS 1.3.14 20511 Thursday, February 26 2015
AngularJS 1.3.13 16351 Tuesday, February 10 2015
AngularJS 1.3.12 5177 Thursday, February 05 2015
AngularJS 1.3.11 132 Thursday, February 05 2015
AngularJS 1.3.10 11924 Thursday, January 22 2015
AngularJS 1.3.9 3994 Saturday, January 17 2015
Angular JS 1.3.8 21641 Sunday, December 21 2014
Angular JS 1.3.7 3473 Tuesday, December 16 2014
Angular JS 1.3.6 5362 Tuesday, December 09 2014
Angular JS 1.3.5 5202 Wednesday, December 03 2014
Angular JS 1.3.4 5920 Tuesday, November 25 2014
Angular JS 1.3.3 8649 Wednesday, November 19 2014
Angular JS 1.3.2 8815 Sunday, November 09 2014
Angular JS 1.3.1 8902 Sunday, November 02 2014
Angular JS 1.3.0 15070 Sunday, October 19 2014
Angular JS 1.3.0-rc5 70 Sunday, October 19 2014
Angular JS 1.3.0-rc4 741 Thursday, October 02 2014
Angular JS 1.3.0-rc3 274 Saturday, September 27 2014
Angular JS 1.3.0-rc2 543 Wednesday, September 17 2014
Angular JS 1.3.0-rc1 283 Thursday, September 11 2014
Angular JS 1.3.0-rc0 1698 Sunday, August 31 2014
Angular JS 1.3.0-beta9 77 Sunday, May 25 2014
Angular JS 1.3.0-beta8 420 Sunday, May 11 2014
Angular JS 1.3.0-beta7 449 Sunday, April 27 2014
Angular JS 1.3.0-beta6 2136 Tuesday, April 22 2014
Angular JS 1.3.0-beta5 517 Monday, April 07 2014
Angular JS 1.3.0-beta4 258 Sunday, March 30 2014
Angular JS 1.3.0-beta3 684 Sunday, March 23 2014
Angular JS 1.3.0-beta2 150 Tuesday, March 18 2014
Angular JS 1.3.0-beta1 239 Monday, March 10 2014
Angular JS 1.2.28 2009 Tuesday, December 16 2014
Angular JS 1.2.27 935 Saturday, November 22 2014
Angular JS 1.2.26 12668 Thursday, October 02 2014
Angular JS 1.2.25 11594 Wednesday, September 17 2014
Angular JS 1.2.24 4860 Thursday, September 11 2014
https://www.nuget.org/packages/angularjs/

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.

-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

and

-ngMessageFormat: Internationalization

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
-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.

-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:

// 1.4+

Result:

-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:


using the limit filter on letters will output the following:

-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

//Second fav:

-Timezones in date filter:

-$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:

-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).

-ngMessageFormat: Internationalization

If you would like to analyze or read these changes in more detail, please refer to the Google AngularJS changelog:
https://docs.angularjs.org/guide/migration#migrating-from-1-3-to-1-4

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

2 Comments

  • a guy commented on October 7, 2015 Reply

    this font is awful i can’t read this

  • Leo Lanese commented on October 7, 2015 Reply

    Sorry, about the font.

    I upgraded to a new version wordpress this morning and automatically took the wrong typography style I’m afraid, thanks for the feedback.

    Leo

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *