How to upgrade AngularJS apps to AngularJS 2.0 ?
We all know that AngularJS 2.0 is here with many benefits and there are lot of advantages of upgrading apps based on Angular 1. Such benefits include better performance, powerful templates, simpler APIs and easy debugging.
Let’s dwell more why there is need of upgrade?
b- integrates in more better way with Web components and other elements.
a- Enables Angular to run in other environments other than browsers.
So while you have decided to upgrade your existing Angular 1 applications into AngularJS 2.0 it definitely does not mean that your Angular 1 apps are not good enough. It’s of course not that with the launch of AngularJS 2.0, your Angular 1 applications immediately stops working.
Hence, before actually going through the process of upgrading apps to AngularJS 2.0 you must really know if not concrete but basic changing grounds and enlist the changes that are crucial while upgrading.
Component Nesting - Components building blocks while you are developing applications in AngularJS 2.0. Component is everything, even your application.
Dependency Injection - In AngularJS 2.0 each component comes with its own injector.
Content Projection - More aligned with the Web Components standard.
ES2015 is the next standardized version, hence must be followed soon.
Application layered by type rather than by feature or component makes it quiet difficult to extract parts of the code base in order to upgrade it.
In AngularJS 2.0, service is also just a class, so this seems like a logical thing to do.
Big Bang - Replacing entire app once.
Incremental - Upgrade existing app’s one service or component at one time.
Choosing the strategy completely depends on whether your application is small or large. If the application is small, it is suggested to use big bang rewrite which is the easiest and fastest way of upgrading. If your application is large, then you can’t just do the whole thing at once. Therefore, it is advisable to do the same step by step and hence must choose the incremental upgrade option.
Here is a typical example of how an Angular 1 project upgrade to AngularJS 2.0 may look like.
1- Initially you have to include the AngularJS 2.0 and ng-upgrade libraries with your existing application.
c. Finally use ng-upgrade to export the directive as an Angular 1 component.
3- Once then, then pick the service which you want to migrate.
a. In this step, there is minimal change which is required or sometimes no change is required.
4- Keep repeating step #2 and #3 in convenient order which suits well with your application development process.
5- Once no or more services or components need to converted drop the top level Angular 1 bootstrap, replace the same with AngularJS 2.0 bootstrap.
To run both the frameworks hand in hand and make the components interoperable, the Angular projects comes with a module ngUpgrade. ngUpgrade is an adapter facade hence developers will not feel that there are two frameworks running simultaneously.
Dependency Injection - Exposing of AngularJS 2.0 services in Angular 1 components and vice-versa.
Component Nesting - Directives of Angular 1 can be used in AngularJS 2.0 components and vice versa.
Content Projection and Transclusion - Transclusion of Angular 1 components with AngularJS 2.0 components and AngularJS 2.0 component projecting Angular 1 directives.
Change Detection - Angular 1 scope digest and change detectors in AngularJS 2.0 are interleaved.
Initially we must ensure that proper communication gets established between each part of your application. The most common pattern of calling another class in Angular is through dependency injection. You know that Angular 1 has a single root injector, but AngularJS 2.0 has a hierarchical injector.
You can write services simply by creating an ES6 class to define the service, rather than a function.
this.prefix = "My Address: "
You can remove almost all references to $scope. In AngularJS 2.0, $scope will be replaced by ‘this’ keyword.
While looking at both the versions of Angular, a component as a directive has its own template. While you are going for incremental migration, you have to migrate these components one at a time. Which also means that ng-upgrade needs to enable components from each framework to nest within each other.
In nested-component process, each template is fully owned by either Angular 1 or AngularJS 2.0 and therefore fully follows its syntax and semantics. This is of course not an emulation mode but is an actual execution in each framework, depending on the type of component.
Combining Angular 1 and AngularJS 2.0 components ensures that Angular 1 scopes and Angular 2 components are interleaved. ng-upgrade make sures that the change-detection is interleaved. ng-upgrade also bridges the scope-digest from Angular1 and change-detection in AngularJS 2.0. This creates a single inseparable digest cycle which spans both the frameworks.
Therefore, Angularjs 2.0 offers dramatic advantages over Angular 1 in terms of performance, simplicity, and flexibility. ngUpgrade offers various useful APIs which gives developers a big step forward while they really look forward for true upgrade of Angular 1 to Angularjs 2.0. The process helps you in allowing you to seamlessly mix components and services from Angularjs 2.0 into a single app.