How to Implement Angular Migration

How to Implement Angular Migration

Hello, coders! In this article, I am going to tell you about how to implement
Angular Migration. I mean, from AngularJS to Angular. But first of all, let’s
talk about their difference and the advantage of new versions of Angular over
the one that was written on JavaScript.

Well, the main question of all developers: is it worth starting a new project on
Angular, not on AngularJS? Definitely – yes! And here’s why:

● it is a competently and carefully designed, highly productive framework;
● with a lower entry threshold compared to its first version;
● with quality documentation and lots of practical examples.

How to Implement Angular Migration

Start a brand new project

Finally a breath of fresh air, complete freedom, you can start with a clean page.
Carefully study architecture, data structure, components, various
abstractions, compile a glossary of terms, applications, etc., so that everything is
looking beautiful.

The freedom of actions

However, with the first version of Angular (which is AngularJS itself), not
everything is so simple. It is necessary that every line of the code that you have
written matches the realities of the framework, its modules, and the services of
a certain type. You can’t just take and neatly create a class or component that
will do something important.

Need to decide what this component will be in frames of the framework? What
type of service: value, constant, or factory? After all, it creates an object with the
new operator, it seems that what you need. Such questions arise almost always
when working with Angular, and there is no clear answer.

Exemption from such restrictions, in my opinion, is the main advantage of new
versions of Angular. You can use any convenient modular system, name it
whatever you want, and connect any code.

Code generator

How to Implement Angular Migration

Next, to start working on the project you need:

● create a file structure of the program;
● configure work with templates;
● configure work with styles, preprocessor;
● configure the assembly for development, configuration, production;
● set up the testing process.

With the latest versions of the framework, we get a command-line tool from
which you can generate applications, modules, components, directives, services,
filters (pipe – their new name), run tests, code validation, etc. And to apply the
above you need to perform one action:

>ng new app-name

All the necessary infrastructure will be created in the best way at the moment.
You can start working immediately. Nothing extra.
The command can accept additional arguments. For example, if you plan to use
a CSS Stylus preprocessor:

>ng new app-name –style = style

The simple compilation and compilation of styles will also be automatically
configured, taking into account the selected preprocessor.

TypeScript

The generated application code in new versions of Angular will use TypeScript,
which scares many beginner developers, most likely due to some misconceptions about it. It’s actually the same JavaScript (ECMAScript 6), but with some nice and useful features:

● interfaces;
● typification;
● enumeration (Enum);
● modifiers (public, private, static);
● decorators (@).

How to Implement Angular Migration

All this allows you to write more stable and good code and eliminates the need
to use JSDoc everywhere.

Once you start using TypeScript, you will only want to write on it, I assure you.
Components Unlike AngularJS, Angular has no controllers, only components. You can create
a new one this way:

>ng generate component playground/player

This command will create a player directory in the playground with the
minimum required component code:

● implementation file;
● template file;
● style file with an extension of the used CSS preprocessor;
● unit test file.

No copy/paste as sources of evil and mistakes!

Two-way binding

The key feature of Angular is two-way binding. How is it implemented in the
latest versions of Angular?

>app-player (position)] = ”playerPosition”gt; lt;/app-playergt;

Angular has a new syntax that allows you to pass property values ​​to the child
components (one-way binding). It uses square brackets:

>lt;app-player [position] = ”playerPosition”gt; lt;/app-playergt;

And you can subscribe to events that occur in child components. For this aim
round brackets are used:

How to Implement Angular Migration

app-player (positionChange) = ”onPositionChange ($ event)”gt; lt;/app-
player;
So, the two-way binding in Angular is realized in such a way:

● transfer of the original value of the property;
● subscription to an event called "property name inside a child component"
+ Change;
● change the property in the parent component when an event occurs.

Thanks to this implementation, there are no watchmakers in Angular, which
used to be the source of many productivity problems. Now everything happens
more naturally.

SOLID principles

Many teams of developers actively use SOLID principles, which make support
and further development of the program a more efficient and enjoyable process.

Angular provides us with a high level of code connectivity, the new powerful
implementation of Dependency Injection, and the ability to abstract from
implementations of various interconnected components using interfaces
(TypeScript).

Form validation

Template-based validation remained the same, but a new additional
implementation has appeared. Its configuration takes place entirely in
JavaScript, which allows you to form a set of rules dynamically, create reusable
validators, and fully control the process, including filtering user input.

A validator (Validators.required and something like that) is a simple function to
which a value is passed and which returns null or an object with an error
description.

You must specify formGroup in the form template:

How to Implement Angular Migration

form [formGroup] = ”formGroup”gt;

Input fields must specify the appropriate names of formGroup controls:

>lt;input type = ”password” formControlName = ”password”
>lt;input type = ”password” formControlName = ”passwordConfirm”

That’s all. The validity of the form and all error states can be obtained through
the formGroup object, which will be updated each time the user interacts with it.

Routing

Routing is similar to the former, but with some nice improvements. For
For example, if a cumbersome application module is rarely used, you can load it
dynamically:

{path: ‘profile’,
loadChildren: ‘app / profile / prodile.module # ProfileModule’}

Processing of all requests starting with / profile (/ profile / photo, / profile /
orders, / profile / orders /: id) will be passed to ProfileModule, which is
downloaded as needed.

Low entry threshold

Despite all the strength of Angular, it really is. In my opinion, due to the fact
that in new Angular:

● the maximum of possibilities of JavaScript is used;
● many things are implemented in a logical and expected way;
● the quality of hints and auto-completion at the highest level (thanks to
TypeScript);
● there is a command line to generate everything you need;
● documentation of the high quality.

How to Implement Angular Migration

However, this does not mean that it is easy for a person who does not know
JavaScript to learn.

How to migrate from AngularJS to Angular?

Well, for this aim I have chosen the hybrid approach to migration. Follow the
instructions below. The task is not the one from the easiest, but still doable.
Actually, personally I faced this problem with versions migrations when I was
moving to a new company.

Once I found one manual instruction, that was created specifically to simplify
the transition without having to create a new project and rewrite each
component from the beginning.

As planned by the developers with whom I was working, our project should
have been started to work both on AngularJS and on the new Angular version
with a gradual replacement of the code.

So I decided to do it. The guide that I have found is quite detailed but mostly
theoretical. For a person who previously dealt mainly with Vue, it was not so
easy to immediately understand the details of the organization of frameworks.
The main difficulty for me was that the structure of projects in AngularJS and
Angular7 is different.

Therefore, there was a need to rewrite all dependencies,
services, and components manually. In fact, any hybridization with this approach
loses its meaning, since the application has to be completely rewritten anyway.

So I did it in the beginning, as I haven’t found an easier way.

However, there is a better option. I will describe in detail what I did. Here we go:
First of all, you need to create a new project.

In the command line of Node.js type the following:

npm install -g @ angular / CLI

How to Implement Angular Migration

Install Angular globally.

The next step is that you need to create a folder for the application and go to it
through Node.js.

The main commands that may be required here to find the desired folder:

cd folder_name and cd – in order to return to the directory above.

So, when the project folder is found, you need to create a project in it.
In the command line in Node.js we write:

ng new project_name

In the process of creating a project, you will be offered several options for the
application, where you need to specify the desired parameters.

When the application is created, you can open it in the browser with the
command:

ng serve –open

However, there is nothing to discover yet.

Now we need to install the dependencies that are required for both AngularJS
and Angular to work:

npm install –save @ angular / upgrade

From now on, the application supports both frameworks.

Now open the old project, looking for the package.json file.

It lists all the dependencies required for our application to work. The important
thing that you have to keep in mind is that they need to be installed manually.
For instance:

How to Implement Angular Migration

npm install –save angular @ uirouter / angularjs

After this step, you can transfer all global styles to the new application. The
next step you will need to do is to transfer all files from the app. How to do
that? Follow the steps below.

Change the name of the root component. Then you need to add the line to
app.module.ts:

import * as angular from angular

This is not specified in the manual instructions that I found but without it,
hybridity cannot be achieved.

We now have an application that is supposed to be hybrid.
In practice, at this stage, various errors may occur, mainly related to
dependencies.

If they do not appear, go ahead and change module by module AngularJS to
Angular of the desired version.

Conclusion

So, to sum everything up, this article gives an excellent visual representation of
the main differences between the code of the two frameworks.

Actually, I could still write a lot about the new version of the framework,
compare the main services, understand how to work with asynchronous
operations, mention jet programming (Rx.js), etc.

But this will not be an article, but a book.

I want to say that the latest versions of Angular are very
professional and high-quality frameworks.

Working with it, you feel that it was written by people who have extensive experience in practical development and you understand: you will no longer want to write on the first JavaScript version.

How to Implement Angular Migration

Thank you for being interested and good luck in implementing Angular
migration!

 

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *