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?

A- Why Upgrade

• Better Performance –
  • a- Faster change detection
  • b- template precompilation
  • c- view caching
  • d- faster bootstrap time
  • e- Lower memory usage
• Powerful templates –
  • a- Removes many directives.
  • b- integrates in more better way with Web components and other elements.
• Server-side rendering-
  • a- Enables Angular to run in other environments other than browsers.

B- Changing Grounds : Changes in AngularJS 2.0

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.

C – Preparing for upgrade –

Let’s see while preparing for actual upgrade what all comes in the way:

Writing new components in ES2015 or TypeScript –

ES2015 is the next standardized version, hence must be followed soon.

Considering layered application by feature or component –

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.

Use .service() instead of .factory() –

In AngularJS 2.0, service is also just a class, so this seems like a logical thing to do.

D- Upgrade Strategies:

There are different upgrade strategies available which you can use:

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

D1- Upgrading apps to AngularJS 2.0:

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.
2- Now pick the component which you want to migrate

• a. Initially edit directive template of Angular 1 in order to conform AngularJS 2.0 syntax
• b. Now convert the directive of controller or linking function into Angular 2 syntax/semantics
• 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.
• b. Now configure the service in AngularJS 2.0
• c. You can now re-export the service into Angular 1 using ng-upgrade if this service is still been used by other parts of your Angular 1 code (this is an optional step)

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.
Interoperability of below mentioned four things is essential:

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

Let’s see how the process of upgrading of apps to AngularJS 2.0 goes through. Certain things holds relevance while we are in a process of upgrades, which are:

• Dependency injection
• Component nesting
• Transclusion
• Change detection

D1.1 – Dependency Injection – Services and Directives

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.

D1.1.1 Calling Services:

You can write services simply by creating an ES6 class to define the service, rather than a function.
As an example, the following can be changed:

angular.module('yourModule')
.service('addresses', ['addressService', '$q', function(addressService, $q) {

  this.prefix = 'Your Address: ';
  this.printAddress = function() {
    var deferred = $q.defer(),
        self = this;
    addressService.getFullAddress(function(addr) {
      deferred.resolve(self.prefix + addr);
    }, deferred.reject);

    return deferred.promise;
  };
});

Contrary to above, you can instead write your service as a class, like so:

angular.module('YourModule')
.service('addresses', ['addressService', '$q', Addresses]);
class Addresses {
constructor(addressService, $q) {
  this.$q = $q;
  this.addressService = addressService;
  this.prefix = "My Address: "
}
printAddress() {
  return this.$q((resolve, reject) => {
    addressService.getFullAddress((addr) => {
      resolve(this.prefix + addr);
    }, reject);
  });
}
}

D1.1.2 Calling Directives:

You can remove almost all references to $scope. In AngularJS 2.0, $scope will be replaced by ‘this’ keyword.
The directive written in ES5:

angular.module('YourModule')
.directive('roar', function() {
  return {
    restrict: 'E',
    scope: {
      dinoType: '@'
    },
    template: 'I am a {{ getType }}, hear me ROAR!

',
    link: function(scope) {
      scope.getType = function() {
        return scope.dino.species;
      }
    }
  };
});

Can be rewritten like:

angular.module('YourModule')
.directive('roar', function() {
  return {
    restrict: 'E',
    scope: {},
    controller: roarCtrl,
    controllerAs: dinoRoar,
    bindToController: {
      dinoType: '@'
    }
    template: 'I am a {{ dinoRoar.getType }}, hear me ROAR!

',
  };

  function roarCtrl() {
    this.getType = function() {
      return this.dino.species;
    };
  }
});

D1.2- Component Nesting and Transclusion

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.

D1.3- Change Detection

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.

E – Conclusion: Angular 1 and 2 running together

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.