Angular JS vs Angular X: Understanding the difference

What is a Framework and Why do you need it?

A framework is an environment with a set of tools that are in the form of functions, classes, and libraries, etc. With the help of these set of tools, you can develop complex applications. Or else, it will take a considerable amount of time to build such complex applications because you will have to start designing from scratch. Frameworks also help you organize the code. To develop front-end web applications, you can use frameworks like AngularJS, VUE.JS, Node.JS, etc.

• Data Binding: This feature automatically updates the model whenever the view changes and vice versa.
• Directives: using which a developer can create custom tags (just like HTML tags <p>, <b> etc) like <student></student>
• Dependency Injection: which wires the application components together that facilitates reusable and testable code.

These powerful features support in developing single-page applications. 

From AngularJS to Angular X

Though AngularJS introduced many features to develop single-page applications, it started to stay behind as and when new advancements in javascript emerged. For example, the elimination of a colossal bundle size when compared to other libraries, which leads to performance issues. One of Google’s competitors introduced ReactJS with better performance than angular, and that highlighted the drawbacks of AngularJS.  Therefore, Google had to rewrite the framework altogether due to imperfections. That is how Angular 2 has come into existence.

What is Angular X(2/4/5/6/7/8)?

Angular X is a Typescript based frontend web framework. It is a complete rewrite of its previous version which is AngularJS. The difference between AngularJS and Angular 2 is so high that to update an AngularJS project to its next version (Angular 2) is quite not possible.  Moreover, it needs to be rewritten entirely in Angular 2. From there, onwards Google decided to launch a new version of Angular for every six months which has some minor upgradations (but not a complete rewrite). Here is a list of all versions of Angular till date;

• Angular 2: before its official release moved from Alpha to Developer Preview and then moved to Beta and finally got released on Sep 2016.
• Angular 3: was never released as to avoid confusion caused by the misalignment of router package as its third version was already released. The router package was mismatching with other packages like @angular/core, @angular/compiler, and @angular/compiler-cli and @angular/http were all in its version 2.
• Angular 4: was released on Mar 2017 and is backward compatible with version 2. One difference between Angular 2 and Angular 4 is ng2 uses Http for API calls, whereas ng4 has come with a new library called HttpClient.
• Angular 5: was released in Nov 2017 and introduced new pipes that can deal with numbers, dates, and currencies. Due to this process of internationalization was standardized across all the browsers and eliminated the usage of polyfills.
• Angular 6: was released in May 2018 with features like Component Development Kit and Angular Material package
• Angular 7: was released on Oct 2018 and had a feature called DragDropModule
• Angular 8: was released in May 2019 and got a new engine called “Ivy” that can be enabled while creating a new angular project (ng new angular-project --enable-ivy). Lazy Loading has a change in angular 8 i.e., loadChildren: () => import('./modules/users.module').then(mod => mod.Module)
• Angular 9: is scheduled to release in Oct/Nov 2019

Why use Angular?

Many companies are using angular X as it benefits the developers for many reasons such as:

• AOT (Ahead-of-Time) Compilation which converts the HTML and Typescript code into Javascript during the build time. Advantage of AOT compilation is that it compiles the code first and then the browser loads the compiled code which results in faster rendering.

• Semantic Versioning (called as SemVer) which is represented as major.minor.patch 

• Angular CLI (stands for Command Line Interface) is a command-line tool that helps in creating and serving angular applications. Once a project is designed for further development, you will have to to create and configure the building blocks such as components, pipes, services, directives. Rest of the things are taken care of by the cli. CLI also takes care of the build of a project and ultimately makes the project development and testing much more comfortable.

• Component-based architecture really helps an application to divide into logical and functional components. Components are independent of each other, which also makes testing easy.

• HTML elements can act dynamically by using directives.

Differences between AngularJS & Angular X(2/4/5/6/7/8)

Angular X is a complete rewrite of AngularJS. Angular and AngularJS are two different frameworks. Therefore, if someone wants to learn, one has to learn two separate frameworks. However, the differences between Angular 2 and other versions like Angular 4/5/6/7/8 are not major ones. As the concepts introduced in Angular 2 are the same as its next versions. So, when it comes to learning a version (above 2) is almost the same as learning the next version.

Architecture

AngularJS: architecture is based on the traditional Model View and Controller (MVC) pattern. Where,

• The view is the presentation layer that is used by the client.
• The controller is the layer that handles the events and binds the data to the properties.
• Model is a layer that abstracts the representation of the data.

Angular X: architecture is based on modules and components. Every application created or developed in Angular X has at least one module and a component inside it. As per the requirement, you can have as many components as needed and can be modularized. A component can be described as a section on a browser that has its own view/template and an associated class which handles business logic. Here is the architectural image;

Dependency Injection

One of the advantages of working with AngularJS and Angular is that they provide the dependent object whenever there is a need. 

AngularJS: uses a subsystem called Injector that takes the responsibility of injecting the dependencies that are required. Dependencies like Services, Filters, and Directives can be injected using the Factory Method, here is how the DI is performed in AngularJS,

Angular X: also has Dependency Injection but with a different pattern. To manage the dependency injection in angular, a decorator typescript class @NgModule is used that takes a metadata object having arrays like; 

(i) declarations: lists all the components, directives, pipes

(ii) imports: lists all the other modules (angular provided and user-created)

(iii) providers: lists all the services that are used to either pass information from one component to another or to interact with a web service.

(iv) bootstrap: holds the component from which the application starts.

Here is an example,

Programming Language

Every framework (like AngularJS and Angular X) should be used with a programming language.

AngularJS: uses Javascript as its programming language. Javascript is a Dynamic Typed Language and is more prone to errors at runtime.

Angular X: uses typescript, which is a superset of javascript and gets transpiled to javascript. Typescript is an optional Static Typed Language. The advantage of making typescript into static typed language is that it can avoid compile-time errors. This typescript is famous for its Object-Oriented concepts like Classes and Interfaces that make any Object-Oriented Programmer use it with great comfort.

Conclusion

There are a number of frameworks in the market that helps in developing single-page applications. However, Angular is surely one of the most popular frameworks that catch every developers or organizations eye because of three important factors; reusable code, mature component library and supportive community.

Jumpstart your Angular training here!