#angular migration

Stage-1: Choose the Type of Migration Based on Your Requirement

There are 2 types of migration based on your existing application –

Migration From the Scratch

Hybrid Approach

If you want to revamp your application completely, migration from scratch could be a better option. In this approach, you can re-engineer your application, starting from designing to the functionality. But, before you start with the migration, evaluate the resources required such as time, money, and human resource. Generally, this type of migration is more feasible for a small size application in comparison to the larger one.

Hybrid Approach is preferable when you want to migrate your application in an incremental way. In this approach, the new code lives with the old until the migration process is completed, requiring you to take care of the framework and maintenance.

The AngularJS/Angular-hybrid module empowers you to run and maintain the operations of two different frameworks simultaneously in one project. The new features are implemented in the new framework, and the old features are being transferred steadily, without affecting the application performance as a whole.

Stage-2: Preparation

Once you have decided the migration type, start preparing your application for the migration-

1. Set up TypeScript.

2. Abide by AngularJS Style Guide for the Code Structure

3. Using a Module Loader

4. Using Component Directive

It is not mandatory to use TypeScript in Angular, it works well with JavaScript and Dart. If you plan to use TypeScript in your upgraded application, it is recommended to bring in the TypeScript compiler before you start the up-gradation process. You can use the TypeScript features in Angular JS as well, this way you will be TypeScript ready.

Being a superset of ECMAScript 2015, switching to TypeScript only requires you to do the following preparations-

Install the TypeScript compiler.

Rename files from *.js to *.ts.

TypeScript imports/ exports can be used in the applications using module loaders, to arrange the code into modules.

Type annotations should be added to the existing functions and variables.

The JavaScript features that are new to ES2015, should also be gradually added to make the code more comprehensible and functional.

You can convert the services and controllers into classes.

Angular is an upgraded version of AngularJS, hence their goals are the same, empowering you to follow the same AngularJS Style Guide for your Angular app as well. AngularJS Style Guide helps you to create cleaner, as well as highly maintainable  AngularJS applications, which is also more closely Angular aligned.

Following rules can make the up-gradation much easier-

One Component per File

Folders-by-Feature Structure and Modularity

These rules make it easier to navigate, find as well as migrate the component/ modules in a cleaner and easier way. Hence, it is the most recommended part of the preparation.

Before you break down the application code as per the rules of the AngularJS style guide, make sure you have a module loader. Though breaking down the code into modules/ component files makes the code more manageable, loading all these files to the HTML page with script tags and that too in a specific order is a bit challenging task. Module Loader helps you with this, maintaining and loading the code in the correct order.

To build the UI of an Angular application, you need components. For AngularJS, this can be done through component directives. In both cases the templates, controllers as well as the I/O bindings are defined by their respective frameworks, making it easier to migrate.

To make the component directives compatible with  Angular, make sure you configure these attributes to the directives:

restrict: ‘E’.

scope: {}

bindToController: {}.

controller and controllerAs.

template or templateUrl.

transclude: true/{}

require

Do not use the attributes like compile, replace, priority as well as terminal as these are not supported by Angular

Stage-3: Migration to Angular

If you are writing your application from scratch to upgrade it to angular then the process is comparatively easier than that in the case of a hybrid approach. In this approach, you need to manage both the code simultaneously during the migration process. Angular provides a very useful library for the same called the ngUpgrade library.

It empowers you to mix and match components of both Angular JS and Angular in the application. Also with the help of the ngUpgrade library, these components can interoperate with each other seamlessly making the migration super smooth and easier.

The ngUpgrade library provides you with a very powerful tool called the UpgradeModule that helps you throughout the migration process. This module consists of the utilities for bootstrapping as well as managing hybrid applications, thereby supporting both Angular and AngularJS code.

ngUpgrade library empowers you to execute the code simultaneously enabling the services and components of one framework to interoperate with the services and components managed by the other framework. This takes place in three major areas-

1. Dependency Injection

2. The DOM

3. Change Detection

Both Angular and AngularJS function a bit differently in various aspects and this holds for dependency injection as well. AngularJS always has only one dependency injection which is always of String type. On the other hand, Angular has a hierarchy of dependency injection which can vary in its type. Despite the differences upgrade/static makes them work seamlessly together in 2 ways-

Upgrade the Angular JS services to avail them for injection to Angular code.

Downgrade the Angular service for injection to Angular JS code.

The DOM of a hybrid application consists of the components and directives of both Angular and AngularJS. The point to consider here is that among all the available elements i.e. components and directives present in the DOM, a framework only treats the elements that are owned by them, else it ignores it.

In the case of upgrading the AngularJS application to Angular, the hybrid application starts as the AngularJS application. Whenever an Angular component is encountered in the AngularJS template, Angular takes control and manages it.

To interleave the frameworks, you can cross the boundary either by using the other framework components or by projecting or transcluding the contents from the other framework.

In Angular JS the change detection and data binding updates are done by the function called scope.$apply(). Whenever an event occurs this function is called either by the framework itself or manually by you after which the updates are made.

Angular takes it differently, executing the code in the angular zone. As soon as the code finishes, Angular automatically detects changes and makes the update. Unlike AngularJS you need not call any functions like scope.$apply(). If the function is already present in the code, no need to remove it, it won’t affect the code anyways.

Steps of Migration-

Switch to Typescript

Install the Angular and ngUpgrade Library

Import UpgradeModule in the NgModule for bootstrapping

Bootstrap the hybrid (AngularJS and Angular) application, for which you need to bootstrap each part of the application be it Angular or AngularJS.

Note: In the hybrid application, bootstrapping has to be done manually with the UpgradeModule unlike the pure AngularJS applications, in which bootstrapping can be done automatically just by adding an ng-app directive in the HTML page. Hence, it is advised that before you switch your application to hybrid mode, switch it to AngularJS, so that you can use the angular.bootstrap method for bootstrapping.

As we have discussed, there are two ways in which you can carry the migration process- Upgrade and Downgrade. We will consider both ways in the steps ahead.

Upgrade your Code

Upgrade– Now that you are running a hybrid app, start upgrading your code. If you want you can upgrade the AngularJS component directives and access it from the Angular code.

Downgrade-  Use the Angular component into the AngularJS code. For this, you can downgrade the component by using downgradeComponent() method. You can rewrite the AngularJS components into the Angular components or you can also add a new Angular component as well.

Project/ Transclude

Upgrade-  If you want to upgrade the AngularJS component, you can transclude the Angular content in it, by marking the transclusion point through the ng-transclude directive.

Downgrade: In case you are downgrading the Angular component, to transclude the AngularJS content into the Angular component, you can use the feature called content projection instead of transclusion feature. To make the component support the content projection, use the tag in it. Inject the Dependencies

Upgrade- To include some essential logic, which you cannot change, you need to inject it in your code. To make the AngularJS dependencies injectable into Angular, you can request for the service from AngularJS $injector.

Downgrade- To inject the Angular code into the AngularJS, you can downgrade the Angular dependencies and use them from AngularJS. For this, you need to import the ‘downgradeInjectable’ function from ‘upgrade/static’.