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!
