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: -
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 –
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: -