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.
What is AngularJS?
Why use AngularJS?
AngularJS has made developers life easy by introducing many powerful features such as;
- 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
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:
- 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.
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;
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.
Every framework (like AngularJS and Angular X) should be used with a programming language.
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!