Angular: The Overview
Angular 2 or just Angular is the Google’s new framework which is designed to create reactive single page web applications.
In October 2014, Google announced Angular 2 as a complete rewrite with no backward compatibility. This was radical decision, a paradigm shift in a widely used framework backed by solid reasoning. Let’s analyse the reason behind this shift.
Angular 1 or AngularJS was designed by Google for designers to create HTML forms quickly. It was later used by developers to create large and diverse web applications. Due to this change in fundamental functionality, Angular 1 had to be equipped with many new features to ensure smooth development. There were however some limitations on the improvements due to some key assumptions that were made while designing the framework. To overcome these limitations, Google made the decision to redesigned the whole framework.
When AngularJS was introduced back in 2010, mobile friendly application development was not major influencing factor. With the proliferation of smart phone usage, a solution was required.
Angular2 or simply Angular is designed with mobile application development at its crux. The philosophy is, any framework which is built to handle mobile development can handle the desktop aspect also.
Creating cross browser compliant apps in Angular 1 is a difficult task. Developers have to create ad hoc hacks to make such apps work on across different modern browsers. Angular2 tackles this issue head on with ES6 and modern browser compatability in mind.
Over time, a number of modules have been added to AngularJS Core. These affect the overall performance of an application. These modules have been removed from Angular 2 and are available on Angular 2’s module ecosystem.
Angular 2 has undergone significant changes, let’s take a closer look.
Separation of Framework
The main change in the Angular2 is separation of the framework into two parts:
- The Core: Deals with components, services, routes, directives and pipes.
- The Renderer: Deals with DOM manipulations, CSS, animations, templates, events etc.
Typescript & Angular2
Lazy loading is a core feature of Angular 2. It allows applications to bootstrap faster as they only need to use the main app module when the page initially loads. As a user navigate between routes, the additional modules will load on demand as the developer defines them in the routes.
Unlike Angular 1 lazy loading means our application does not need to load everything at once, it only needs to load modules required by the default route when the app first loads. Modules that are lazily loaded will only be loaded when the user navigates to a route that depends on a specific module.
Improved Dependency Injection
Although directives in Angular 2 and Angular 1 have many things in common, they have become well defined in Angular 2 and each type directive is capable of specific tasks.
There are three types of directives:
- Attribute Directives
- Structural Directives
Angular 2 components are actually just directives under the hood. Before the Component API shipped in Angular 1.5, directives with templates that were used as elements were defined in a similar way, as an attribute directive using the same API. This approach commonly led to messy directive declarations.
Components use the directive API, however give us a cleaner interface for defining them by hiding a lot of the defaults that would otherwise be cumbersome. The other two directive types, attribute and structural, do not have templates. Instead, their purpose is specifically taylored to two types of DOM manipulation. Structural directives change the DOM layout by adding and removing DOM elements. Attribute directives change the appearance or behavior of an element.
The routers of Angular 1.x were designed to handle simple test cases. As their usage became more common, additional modules were developed which developers could add to their projects as required. The core of Angular 2 has been re-designed to handle all routing types and includes child routing.
As of March 2017 Angular 4 AKA “invisible-makeover” has been released and is now the preferred version for production use. It’s fully backward compatible with Angular 2. The primary changes are in the core with the intention of improved performance by producing smaller and even faster apps than before.
This overview is aimed to help you understand what you can expect from Angular 2 and understand the dramatic improvements over it’s predecessor.
If we’ve missed anything or you have something to add, feel free to get in touch.