How to upgrade AngularJS apps to 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.
  • Here is a typical example of how an Angular 1 project upgrade to AngularJS 2.0 may look like.
  • 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.
  • Combining Angular 1 and AngularJS 2.0 components ensures that Angular 1 scopes and Angular 2 components are interleaved.

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?

@MetroGenesis: How to upgrade AngularJS apps to AngularJS 2.0 ? – Algoworks

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

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

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:

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

3- Once then, then pick the service which you want to migrate.

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:

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:

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.

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); }); } }

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; }; } });

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.

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.

How to upgrade AngularJS apps to AngularJS 2.0 ?

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.