AngularJS 2.0 to get seamless upgrade path

The AngularJS team has finally woken its community up from what was probably the worst nightmare it will ever experience. Plans to update to AngularJS 2.0 without a migration path have now been replaced with a clear outline for a seamless harmony between old and new versions.

As at last year’s NG-Europe conference, details of AngularJS 2.0 caused a shitstorm unlike any other the Angular community had seen before. The AngularJS development team announced drastic changes to the open-source framework, among others the removal of many familiar Angular concepts such as controllers, Directive Definition Objects, $ scope and angular.module, as well as the launch of the disliked new Google language AtScript (which has since been abandoned).

To top it all off, the Angular developers said there would be no migration path from 1.x by 2.0. Understandably, AngularJS developers everywhere were nothing short of pissed off.

But now, after months of complaints and a full-blown community petition for a migration path, the AngularJS team has listened to the grumbling of its community and has spoke the very words that programmers needed to hear.

“The path to a seamless upgrade”

As recently announced by the AngularJS team, there will now be a seamless upgrade path between AngularJS 1.x and 2.0. In effect, this means developers no longer need to consider those initial plans for a “pseudomigration” with the ng-router, which allowed developers to use parts of AngularJS 1.x applications in the new release.

Instead, developers can look forward to a seamless mixture of both versions, in other words testing out the components and services in the new AngularJS without sacrificing the old reliables from the 1.x series. This means it will be possible to update an application service by service and component by component with small commits (rather than view for view, as in the last iteration).

The seamlessness between AngularJS 1 and 2 relies on four things being interoperable between both versions: dependencyinjection, component nesting, transclusion and change detection. In order to do this, the Angular team has built a library called ng upgrade and outlined the necessary steps to implement this on the official AngularJS blog.

AngularJS 1 and 2 side by side

The Angular team gives an example of how a typical upgrade process could be structured:

Include the Angular 2 and ng-upgrade libraries with your existing application

Pick a component which you would like to migrate
a. Edit an Angular 1 directive’s template to conform to Angular 2 syntax
b. Convert the directive’s controller/linking function into Angular 2 syntax/semantics
c. Use ng-upgrade to export the directive (now a Component) as an Angular 1 component (this is needed if you wish to call the new Angular 2 component from an Angular 1 template)

Pick a service which you would would like to migrate
a. Most services should require minimal to no change.
b. Configure the service in Angular 2
c. (optionally) re-export the service into Angular 1 using ng-upgrade if it’s still used by other parts of your Angular 1 code.

Repeat doing step #2 and #3 in an order convenient for your application developmen

Once no more services/components need to be converted drop the top level Angular 1 bootstrap and replace with Angular 2 bootstrap.

Each individual change can be carried out individually. The application will continue to function and can be continuously supplied with updates. Also, the more modularized and component-driven an application is, the less expense and effort there will be. For anyone that can’t wait to start poring over the exciting nitty-gritty of Angular migration, the development team has created a detailed outline of the upgrade strategy.

Finally, if you still aren’t sold on the new release, here are a few reasons the Angular team is giving us to look forward Angular 2.o: faster change detection through monomorphic JS calls, template precompilation and reuse, view caching, lower memory usage and linear scalability.