Comparison of Angular JS and Angular JS 2

Angular, React, Ember, Meteor… Frontend world is on the edge of a full-scale war of different technologies adherents. We are awaiting the powerful and universal hero. So, who will save the web development galaxy and become a protagonist of the new era?

After hearing our prayers, Google has upgraded its well-known hero Angular. All the Angular devotees were delighted with the appearance of the second version of one of the most popular frameworks. Due to the drastic changes, there is a belief that Angular 2 is the absolutely new framework written from scratch. So, let`s figure out together whether it is only someone’s personal opinion or the objective assessment through analysis of the improved (or added) features and characteristics.

Advantages of Angular 2 

Angular 2 is the newest generation of the Google’s JavaScript frameworks. Its functionality differs markedly from the previous version. This improvement has a reasonable explanation. JS was upgraded to the next version (ECMAScript 6) and modified in accordance with the modern web development standards. 

Increased performance

When AngularJS was created more than 5 years ago, in fact it was designed not for the professional programmers. It was rather a tool for the novice developers who were in need of quick HTML form writing. In course of time Google tried to improve Angular 1 based on different requirements with the aim of creating the more advanced applications. Now Angular 2 is the tool which allows to develop the projects of high complexity. It is worth noting that Angular 2 also has the improved building blocks.

The fact is that Meteor team has recently held a competition among the frontend frameworks to compare their performance. Angular 2 won this championship, leaving behind React and other modern technologies.

Simple, but not simplified

Angular 2 is superior to its predecessor Angular 1 by the criterion of simplicity. Due to the less complex theoretical base, Angular 2 is easier to understand. But this simplicity does not mean the reduced efficiency. Vice versa. 

For example, Angular 2 contains everything in the Component. Therefore, you don`t need the Controller, because the Component operates integrally. You don`t require $scope and ViewModels, too. Even View can be inserted in the Component by means of decorators and multi-line chains.

@Component decorator describes a selector which chooses the messenger`s tag similar to ng-controller in Angular 1. The component type described in @View is connected and inserted in the elements chosen by the selector. The connective context which is used while creating the form is the very Component, so its properties are available in Mustache template described in @View.

Priority for mobile applications

Developers have designed Angular 2 for mobile applications from the ground up and optimized it in terms of the memory efficiency and smaller number of CPU cycles. The touch-events and gestures are the first-class objects which work on all the devices. All the performance tests conducted by Angular team are in open access at GitHub. So, absolutely anyone can study them and even use.

Dependency injection

It is a kind of the improved building blocks. The use of the TypeScript type annotations eliminates the need for a “magic” chains. Add to this a declarative character of decorators and you’ll get a great result. Another excellent feature of the dependency injection system is a hierarchy. It is especially important in the situations where we have the complex Component-trees and want to separate the components clearly.

Data bindings

Google has completely redesigned a change detection that helped to remove all the Angular 1 flaws.

The most noticeable improvement of the binding data is that Angular 1 detectors column was converted into the tree. This transformation simplifies the determination of the necessary changes that finally increases the efficiency. In combination with the Observable or Immutable objects you can continue optimizing a strategy of the change detection.

Moreover, having listened to the opinion of the community, Angular team has implemented the bilateral data binding through the well-known ng-model directive, which can be used in the forms of Angular 2.

Templates

The templates have also been improved. Of course, for the non-professional view this improvement may seem rather as the “surface grinding” (using [], (), [()], #, and *), but actually the whole template system was completely redesigned. Now it supports the web components and even the native elements. This means that such a popular framework as NativeScript (for example) can use its own visualizer. In addition, Angular 2 has got the possibility of visualizing the cross-platform and native user interface for iOS and Android. A separation of the rendering pipeline from other parts of the framework allows to create interesting scenarios such as the rendering on the server side.

TypeScript

The previous year TypeScript and Angular teams arranged a meeting to discuss how TypeScript can replace AtScript. 

They have reorganized a large part of the TypeScript codebase. As the result, the improved TypeScript and Angular as well as decorators and the number of other ES6 features were developed.

TypeScript is the first class object in Angular 2 system. With its help you’re able to create any complex application in JavaScript. 

The first class object status does not only mean that the source code of the framework is written in TypeScript. It also indicates that documentation and guides include the examples written in TypeScript. Furthermore, npm package has a declarative files written in TypeScript (.d.ts). So, if your editor supports TypeScript, it will facilitate the preparation of the framework for a launch. JavaScript (ES5) is the next first class object if Angular 2. It is presented in the form of convenient and quick API for the component descriptions.

Instance Scope

In Angular 1.x all instances of the class were the singletons in DI. It was remained defaulted in Angular 2.0. To receive a different behavior in 1.x, it was necessary to use the Services, Providers, Constants. This led to confusion.

Fortunately, the updated DI has a new, stronger features, and Google also provided control of instance scope. If you need to create a new object instance in DI, just type: 

@TransientScope

export class MyClass { ... } 

This feature becomes stronger when you create your own instance scope identifier in combination with the child injectors.

Child injectors

Child injectors is a new great feature which inherits from a parent all the services, but allows to redefine them at its level. When you combine it with the own instance scope, you can easily call some types of objects in your system that will automatically override them in different instant scopes on the basis of various navigation scenarios.

Router

In Angular 2 the router is declarative and much more flexible. There is nothing superfluous in its configuration and each route leads to the Component. It is possible to create several endpoints: the components or separate daughter applications that have different routing configurations.

Bootstrapping: or the app initialization

In Angular 2.0 ng-app directive, which helps to determine the entry point into the application, disappears. 

After importing all the dependencies to the main “module” using the View and Component annotations, you should describe the component (which selector will contain it and which template will replace it). Right there you specify the dependencies of all other components that will be used in the core template. After that, you obtain the tree-like hierarchy of components that directly or indirectly depends on the main component. 

All in all, there is an app initialization by the bootstrap (App) instruction.

Migration from Angular 1

When Google announced the release of Angular 2, there was no clear migration route from Angular 1. This solution immediately became the target of criticism by the community, and Angular team decided to create ngUpgrade.

NgUpgrade represents a set of the best practices, guidelines, and strategies which help to develop the applications in Angular 1.x compatible with the version 2.0. Instead of this, the major component (class App) that organizes the rest of the app components appears.

So, is Angular 2 our savior?

Naturally, Angular 2 has a diversity of the undeniable advantages. An experienced team of developers introduced the universal and useful features. Now a framework is not burdened with a backward compatibility, obsolete architectural solutions, and other problematic aspects. Angular 2 has taken the best from different libraries, drastically modernized the previous version, and finally brought peace to the frontend world.