Using UpgradeAdapter

The UpgradeAdapter class is the class that will help blend Angular 1.x and Angular 2.0 into one application built on both foundations. We will do it by bootstrapping our application in a slightly different way.

You may have used the ng-app directive on your HTML file, or the angular.boostrap method. To bootstrap the Angular 1.x application so it can work with Angular 2.0, we must in our main.ts file create an instance of the UpgradeAdapter.

With that instance, we will bootstrap our application module:

let upgradeAdapter = new UpgradeAdapter();

upgradeAdapter.bootstrap(document.documentElement, ['dunebookexampleAppModule']);

Note: The difference here is the use of upgradeAdapter.bootstrap instead of angular.bootstrap.

Making Angular 1.x service available to Angular 2.0

UpgradeAdapter also helps us make an Angular 1.x service available to Angular 2.0.

In this example we wish to use the old Angular routing module’s to get route parameters, therefore we need the $routeParams service.

upgradeProvider.upgradeNg1Provider('$routeParams');

And vise versa:

 angular.module('dunebookexampleApp').controller('dunebookexampleAppController',
   upgradeAdapter.downgradeNg2Provider(YourProviderType));

Now your service is almost set to work with Angular 1.x, but one thing you still need to do is add it to your provider’s list. Remember that unlike Angular 1.x, services in Angular 2.0 aren’t singleton, but an instance is created whenever they’re in the provider’s list. To create an instance of them available to Angular 1.x you need to use addProvider method.

Here’s an example for adding HTTP client of Angular 2.0 to Angular 1.x.

upgradeAdapter.addProvider(HTTP_PROVIDERS);

Now we can work with Angular 1.x and Angular 2.0 side by side. What has been left is to change the code from Angular 1.x to Angular 2.0.

Migrating a component

The Angular 1.5 component has a template (or template URL), controller and binding object. The method of migrating it to Angular 2.0 component is almost straight forward:

1. The template stays the same and is moved into the template member of the ViewMetaData object being sent to the Component decorator. The data binding, of course, is changed to the Angular 2.0 syntax.
2. The controller object is the class being exported. We need to replace the controller function to class (if haven’t done so already) and export it.
3. All binding members are now component class members decorated with the Input decorator.

Migrating a directive

When dealing with an attribute directive, the migration process is a little different than the component, but not by far.

1. The link method can be copied into the directive constructor.
2. If you’re using $scope.$watch it is highly recommended that you switch to properties. You must do so in Angular 2.0, because there is no $scope.$watch there.
3. Scope members are now class members decorated with @Input().
4. The directive name is now on the selector member of the metadata object being sent to the Directive decorator. Please note that there is no difference between what is put in the decorator and the directive usage besides the square brackets for the attribute.

For the Angular 1.x component directive (the one used before Angular 1.5) the process is almost like the component process, but scope members relace the binding members.

Migrating a filter (to pipe)

1. In filters, the function being returned needs to go to the pipe’s transform method, while the pipe class implements the PipeTransform interface. There are no changes in the arguments order.
2. Decorate your class with the Pipe decoratior and give the filter name to the name member of the metadata object.

Migrating a service

The process of service migration is the easiest one, note that if you have migrated your service to be written in Typescript, all you need to do is to skip registering it, and have it in the providers array of your app’s main component.

1. The service function becomes an exported class decorated with Injectable.
2. All function members are class members.
3. Register your service in the providers array of your app main component.
4. Remove the angular.module(…).service(…) registration.