Basic Architecture Of Angular 2 Applications

Metadata

Metadata is the way of defining the processing of a class. In TypeScript, we can define metadata by using decorator. For example, if we define any component in Angular application, we need to tell Angular that this is the component, by using metadata of the class (using @Component decorator).

Metadata example
The decorator @Component is used to configure the object to create the component and its View. The selector is creating the instance of the component. In the above example code, if Angular finds <testapp> tag in HTML, it replaces it with the template defined in component.

Template

The template is the component View that tells Angular how to display the component. It looks like normal HTML.

Data Binding

Data binding is a powerful feature of software development technologies. Data bind is the connection bridge between View and the business logic (View Model) of the application. Data binding in AngularJS is the automatic synchronization between the Model and View.

There are four type of binding supported by Angular 2 application,

• Interpolation - It displays the component value within the HTML tags which is also referred as Expression in Angular 1.x.
• Property Binding - It passes the value of property from the parent to the property of the child.
• Event Binding - It fires the event when we click on the components method name.
• Two-way Binding - It is an important form that combines event and property binding in single notation by using ngModel directive.

Service

Service in AngularJS is a function or an object that can be used to share the data and the behavior across the application. It is JavaScript function which is used to perform a specific task. It includes the function, values, or any other feature required by the application. Typical examples of services are logging service, data service, message service etc. There is no base class for service.

Directive

Directives are one of the most important components of AngularJS application. They are extended HTML attributes. These are the markers on the DOM element which provides some special behavior to DOM elements and tell AngularJS's HTML compiler to attach. It is class with directive metadata. To create directive, we have to apply @Directive decorator on attached metadata to the class.

There are three types of directives.

• Decorator Directive - It decorates (@Directive) the elements using additional behavior. There are many built-in directives like ngModel etc.
• Component Directive - It is extended of @Directive decorates with template-oriented features.
• Template Directive - It converts HTML into a reusable template. It is also known as Structural directive.

Dependency Injection

Dependency Injection is a software design pattern in which objects are passed as dependencies. It helps us remove the hard coded dependencies, and makes dependencies configurable. Using Dependency Injection, we can make components maintainable, reusable, and testable.

Point to remember about Dependency Injection,

• It is stimulated into the Angular framework so that it can be use anywhere in an application.
• The injector is a main mechanism to maintain the service instance and can be created using a provider.
• The provider is the way of creating a service.
• We can register the providers along with injectors