Angular: The Overview

AngularJS

Angular 2 or just Angular is the Google’s new framework which is designed to create reactive single page web applications.

The previous Angular 1 or AngularJS is a JavaScript framework which is extensively used for the development of web applications. The initial release date was late 2010, since then AngularJS has continuously evolved to accommodate for the ever changing world of internet technology.

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.

Purpose

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.

Mobile Support

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.

Browser Support

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.

Code Modularity

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:

  1. The Core: Deals with components, services, routes, directives and pipes.
  2. The Renderer: Deals with DOM manipulations, CSS, animations, templates, events etc.

Typescript & Angular2

Microsoft joins hand with Google to develop Angular 2 on TypeScript by agreeing to add decorators i.e annotations to its TypeScript language (a strict superset of JavaScript). Thus, TypeScript emerged as the language for developing Angular 2 applications.

Lazy Loading

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

Dependency injection was the main feature of Angular 1.x, and for that reason it was the preferred choice of JavaScript frameworks by many web developers. There was however some issues relating to the Angular 1.x approach. Angular 2 resolves these issues and has improved this feature. It also provides child injectors which have the ability to inherit the parent’s services, they can override services at child level.

Directives

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:

  1. Attribute Directives
  2. Structural Directives
  3. Components

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.

Routing

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.

Angular 4

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.

Conclusion

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.