Migrating AngularJS App to Angular App

We all know Angular has had loads of improvements and has been designed from scratch. So, one of the most bugging questions among the Angular developers is how can we migrate existing AngularJS applications into Angular. In this chapter, we are going to discuss best practices, approaches, and tools recommended to successfully migrate existing AngularJS applications.

In this chapter, we will cover the following topics:

• Migration process
• Syntax difference
• Benefits of upgrading to Angular
• Rules for incremental upgrade to Angular
• Incremental upgrading using UpgradeAdapter
• Components migration
• Roadmap from AngularJS to Angular

Migration process

AngularJS and Angular differ syntactically and conceptually. So the migration process involves code change not only on a syntactical level but also in implementation. The Angular team made the life of the developers easier by providing built-in tools in Angular for migrating AngularJS applications to Angular. There is some preliminary process to do in our existing AngularJS applications before starting up the migration process.

The preliminary process involves decoupling the existing code and making the existing code maintainable. This preliminary process not only prepares the code for upgradation, but will also improve the performance of the existing AngularJS applications.

We can follow an incremental approach by running both AngularJS and Angular in the same application and initiate the migration process one by one starting from the components. This approach...

Syntax difference between Angular and AngularJS

Angular has different syntax compared to AngularJS in many ways. Let us see few of them here.

Local variables and bindings in templates

A template is a view that deals with the UI part of an application that is written in HTML. First we will see the syntax differences for One-way Data Binding.

AngularJS:

<h1>Book Details:</h1> 
<p>{{vm.bookName}}</p> 
<p>{{vm.authorName}}</p> 

Angular:

<h1>Book Details:</h1> 
<p>{{bookName}}</p> 
<p>{{authorName}}</p> 

Both the code snippets show the One-way Data Binding that binds the book and author name to the UI using the double-curly braces. However, the AngularJS...

Benefits of upgrading to Angular

Let us see some of the benefits of upgrading to Angular:

• Better performance: Angular supports faster change detection, faster bootstrap time, view caching, template pre-compilation, and so on.
• Server-side rendering: Angular has been split up into an application layer and a render layer. This enables us to run Angular in web workers or even servers other than browsers.
• More powerful templating: Angular introduces new template syntax that removes many directives and integrates better with web components and other elements.
• Better ecosystem: The Angular ecosystem will eventually get better and more interesting in the future.

Strategies to upgrade to Angular

There are different upgrade strategies...

Rules for incremental upgrade to Angular

It will be easier to do an incremental upgrade if we adhere to the following set of rules:

• Implement one component per file; it helps to isolate the components and migrate them one by one.
• Apply modular programming and arrange the folder by features; this will enable the developers to concentrate on migrating one feature at a time.
• Use a module loader; following the preceding rules, you will end up with a large number of files in a project. This creates the hassle of organizing the files and referring them in the correct order in the HTML pages. When you use a module loader such as SystemJS, Webpack, or Browserify, it enables us to use TypeScript built-in module systems. This enables the developers to import or export features explicitly and share them between various parts of the application in the code.
• Install TypeScript first; it is...

Incremental upgrading using UpgradeAdapter

Incremental upgrading can be done seamlessly using UpgradeAdapter. UpgradeAdapter is a service that can bootstrap and manage hybrid applications that support both Angular and AngularJS code. UpgradeAdapter enables you to run both AngularJS and Angular code simultaneously. UpgradeAdapter facilitates interoperability between components and services from one framework to another framework. The interoperability in Dependency Injection, the DOM, and change detection will be taken care of by UpgradeAdapter.

Injecting AngularJS dependencies to Angular

We may come across a scenario where the business logic on AngularJS services or any built-in services, such as $location or $timeout, is to...

Components migration

Designing AngularJS applications by component centric is good practice rather than designing them by controller centric. If you had developed your application following this practice, then it will be easier for you to migrate. Component Directives in AngularJS will have their template, controller, and binding similar to Angular components. But make sure your AngularJS application Component Directives did not use the attributes such as compile, replace, priority, and terminal. If your application implemented Component Directives with these attributes then it is not liaising with Angular architecture. If your AngularJS application was developed using AngularJS 1.5 and the components are implemented using the component API, then you might have noticed the similarities in Angular components.

Roadmap from AngularJS to Angular

It is good to follow this roadmap in migrating AngularJS to Angular:

• JavaScript to TypeScript
• Installing Angular packages
• Creating the AppModule
• Bootstrapping your application
• Upgrading your application service
• Upgrading your application component
• Adding the Angular router

Let us discuss them in detail in the following sections.

JavaScript to TypeScript

Start your migration process by introducing TypeScript, as you will be writing your code using TypeScript in Angular. Installing TypeScript into your Angular application is quite easy. Run the following command to install TypeScript from npm into your application and save the package information to package.json:

npm i typescript --save-dev...

Summary

Way to go! Loads of stuffs, isn't it?! We started learning about migration in Angular.

Then we have seen various approaches and best practices in migrating AngularJS to Angular applications.

Next we discussed incremental upgrading using the upgrade adapter.

Finally, we learned in detail about the roadmap in migrating from AngularJS to Angular.

In the next chapter, we will discuss Angular CLI, which is the command line interface for Angular.