Essential Building Blocks of Angular 2 Architecture

Angular 2 is the new revamp and more refined version of all time popular JavaScript framework Angular (1.x). Visualizing Angular 2 is nothing but applying of all Angular lessons we have learned since 1.x and version just before Angular 2. It elevates component based architecture while including all new features of ES2015 or TypeScript like classes and modules.

In simple word we can define Angular 2 as a JavaScript Binding Framework which sits in between the JavaScript Object and HTML UI.

Core Blocks

Below mentioned are the main building blocks of an Angular 2 application: -

Modules groups components logically within the project. Angular 2 basically is a modular framework where every block of functionality is encapsulated within a module and exposed outside within project as a service. There are two types of modules one is encapsulating block of function within single component and other is encapsulating block of function within single or group of components by providing exposure in unified manner via an interface.

Components help in controlling UI block and also it provides data and logic. It represents a unique "View" and "View Model" in MVVM pattern or exactly like what Controllers do in Angular 1. The "View" or Template shows how the complete component will look–like when displayed on browser. "View Model" has all required logic part in order to provide "View" with rich functionality and data. The Styles provide the component with a specific look and feel while Metadata ensures connectivity of everything together. Please note that Component Styles are only applied and are limited to the Components only. Along with Template and Metadata it builds a complete encapsulated & isolated UI unit.

Templates represent a view with syntax in order to improve HTML with Angular 2 functionality like data binding. They simply extend HTML with new syntax and add behavior to it so that interpolation, two-way Databinding can be achieved.

Metadata helps in connecting everything together, a "View" with a "View Model" with Styles. Metadata along with its tag and attributes are responsible to tell Angular 2 that a simple class can become component when it is decorated by component decorator. The Component decorator includes bundle of metadata along with the class which guides Angular 2 how to work and process it in your application at the time of runtime. Some of the Metadata are as follows: -

1. selector is Metadata which tells Angular 2 which of the custom HTML to be included with the component,
2. templateURL is the exclusive URL for the template to be used when processing the component,
3. an array of directives with this kind of Metadata it will tell Angular 2 which other Component(s) or the directives should be included in that component,
4. an array of styleURLs with this type of Metadata you can easily define customized styles for the component
5. and with this Metadata an array of providers tells Angular 2 how to inject dependencies (like services we have) in a component or @RouterConfig that helps you to configure routing in your project application.

Databinding helps you to bind data and server interaction between Template and Component building block in a declarative manner. There various types of Databinding available in Angular are interpolation, property binding, event binding, one-way and two-way binding.

Services simply help in making reuse of service. As project becomes bigger naturally more components will add to it and which also will require data to access. So every time making a copy-paste of code it will create single reusable (singleton) data service.

Directives basically command Angular 2 how it has to process DOM. By nature they are classes which are decorated with the @Directive decorator. There are three types of Directives present in Angular2 –

1. Components Directive is a unique type of directive which is involved along with Template.
2. Structural Directive is like *ngFor and *ngIf which enables you to make changes to DOM with the help of adding or by removing nodes.
3. Attribute Directive helps in adding behavior or do a change in the look or appearance of a specific element just like ngmodel directive which implements two-way data binding is an Attribute Directive.

There are other built-in Directives like ngClass, ngStyle and ngSwitch.

Dependency Injection to inject the necessary dependencies for a given component/service at runtime and provide flexibility, extensibility and testability to the framework and your application.

Also go through below project video series based on Angular 2: -