Upgrade from AngularJS (v1) to Angular (v2)

Although more than six years since the initial release of AngularJS has gone, the version number one of the famous web app framework based on JavaScript remains an in-demand tool to develop single-page applications. If you were too busy, you might have missed the release of the second version of the open-source platform in 2016. Angular is the name of a complete remake of the product named AngularJS. The developers got rid of any numerical attachments to avoid any misunderstanding. Only the fourth version of the platform contains the numerical indication and bears the name of Angular 4. We will not delve into the history of the framework’s family but focus on the first and second creations of the Angular team.

This article is made to reassure the developers currently working on AngularJS to opt for an upgrade to the second version of the platform.

Here are the three theses to the advantage of using Angular 2 for your project:

  • The second version is a competent and carefully designed high-performance framework;
  • The platform has a lower entry barrier compared to the first version;
  • A proper documentation and many application examples are available.

Let’s have a look at the differences in detail.

Cart Blanche

AngularJS does not provide a lot of freedom for your actions. You cannot turn over a fresh leaf and start to develop the architecture, data structure, components, various abstractions etc. The first version of the platform stipulates the certain types of modules and services to comply with. It is impossible to create a class of components from the ground up without matching the framework requirements. A developer using the version 1 always has numerous questions like “Which service type to choose from ‘value’, ‘constant’ or ‘factory’?” and many others related.

The rewrite of the platform does not provide such limitations. You can use any modular system, name and attach a random code.

Code Generator

A command line interface enabling the generation of apps, modules, components, directives, pipes (former name of filters), the launch of testing or code verification and many other useful features. All these requires only one command – ‘ng new app-name’. As a result, the required infrastructure will be created. Nothing in excess and you can start working.

TypeScript

A new feature is a use of TypeScript by the generated app code. Put away any concerns about this language since it differs from JavaScript by some useful features including interfaces, typification, enumerations, modifiers, and decorators.

All this blend enables you to create a more stable and beautiful code and releases from using the nasty JSDoc everywhere.

Components

Angular v.2 does not have controllers but only components. A new component can be created via the command ‘ng generate component playground/player’. A baseline component code contains an implementation file, template file, file of styles with an extension of the used CSS preprocessor, and a unit-test file.

Two-Way Binding

As you know, the main peculiarity of AngularJS is two-way binding. It is implemented in the second version via the transfer of a source property value, subscription to the event called “name of property inside child component” plus “change”, and the change of properties in a parent component at event occurrence.

For example, a template entry ‘<app-player [(position)]=”playerPosition”></app-player>’ transfers a property value of ‘playerPosition’ of the current component and it will change it upon any change of property of ‘position’ inside ‘player’ component. The key difference is a new syntax using the square brackets.

Such implementation caused an elimination of watchers that previously were the reasons for the numerous performance issues.

Compliance with the SOLID principles

In Angular, the issues associated with a high level of code cohesion are solved by a new mighty implementation of Dependency Injection and the possibility to abstract from the implementations of various interconnected components through the interfaces.

Form Validation

The template-based validation available in the first version has remained. Nevertheless, the second version offers an additional implementation with a JavaScript configuration enabling to form dynamically a set of rules, create the reusable validators and manage the process to the full extent including to filter the user input.

Routing

The routing on the v.2 has some pleasant improvements compared to the previous version. For example, you can dynamically load some bulky application module if it is used seldom. All the request starting with ‘/profile’ including ‘/profile/photo’, ‘/profile/orders/’, and ‘/profile/orders/:id’ will be processed by ProfileModule, which will be downloaded at the first need.

Low Barrier of Entry

The knowledge of JavaScript is the basis to master Angular. If you are familiar with JS, you will face no problems with the second version of the web app platform due to its low entry barrier. In fact, this version has numerous improvements including the maximum use of JavaScript capabilities, logical implementation of multiple functions and features, high level of tips and auto-completion, availability of the command line interface to generate all necessary things, and a decent documentation.

Bottom Line

In this article, you can find a small part of all features implemented in the second version of Angular. A lot of things like main services, asynchronous operations, reactive programming and others remained untold.

To sum up, AngularJS is a professional platform but its upgrade offers a new level of usability and comfort for the creation of high-quality products. As a result, when you taste the features of Angular 2, you will not want to get back to the first version.