Angular 2 architecture

Angular2 is a complete one-page application development framework that provides many components.

In this chapter, we'll discuss the architectural style of the Angle 2 framework to implement user applications. The following daigram shows the architecture of Angel 2:

The architecture of Angular 2 contains the following modules:

• Module
• Component
• Template
• Metadata
• Data Binding
• Service
• Directive
• Dependency Injection

Module

Module components are characterized by blocks of code that can be used to perform a single task. /b10> You can export the value of a value from code, such as a class. /b11> The Angular application is called a module and uses many modules to build your application. /b12> The basic building block of Angular 2 is the component class that can be exported from the module.

Some applications have a component class named AppComponent, which you can find in a file called app.component.ts. Use the export statement to export the component class from the module, as follows:

export class AppComponent { }

The export statement specifies that it is a module whose AppComponent class is defined as public and can be accessed by other modules of the application.

Component

Components are controller classes with templates that primarily handle views of applications and logic on the page. /b10> It is code that can be used throughout the application. /b11> Components know how to render themselves and configure dependency injections. /b12> You can associate CSS styles with components using component inline styles, style URLs, and template inline styles.

To register components, we use @Component comments to split the application into smaller parts. /b10> There is only one component per DOM element.

Template

A view of a component can be defined by using a template that tells Angular how to display the component. For example, the following simple template shows how to display the name:

<div>
Your name is : {{name}}
</div>

To display this value, you can place the template expression in interpolation braces.

Metadata

Metadata is a way to process classes. /b10> Consider that we have a component called MyComponent, which will be a class until we tell Angular that it is a component. /b11> You can use metadata to tell Angular MyComponent that it is a component. /b12> Metadata can be attached to TypeScript using the decorator.

For example:

@Component({
   selector : 'mylist',
   template : '<h2>Name is Harry</h2>'
   directives : [MyComponentDetails]
})
export class ListComponent{...}

@Component is an decorator that uses configuration objects to create components and their views. /b10> Selector creates an instance of the component, where it finds the tag in the parent HTML. /b12> The template tells Angular how to display the components. /b13> Instruction Decorator is used to represent an array of components or instructions.

Data binding

Data binding is the process of coordinating application data values by declaring the binding between the source and the target HTML element. /b10> It combines the template section with the component part and the template HTML, using tag bindings to connect the sides. There are four types of data binding:

• Interpolation: It displays the component values in the div label.

• Property binding: A property that passes a property from a parent property to a child.

• Event binding: Triggered when you click the component method name.

• Bidirectional binding: This form binds properties and events in a single symbol by using the ngModel directive.

Service

A service is a JavaScript function that is only responsible for performing specific tasks. /b10> Angle services are injected using a dependency injection mechanism. /b11> The service includes the values, functions, or functions required by the application. /b12> In general, a service is a class that can perform certain things, such as log services, data services, messaging services, application configuration, and so on. T here is nothing about services in Angular, and there is no ServiceBase class, but services can still be considered basic perspective applications.

Instructions

The pseudo-instruction is a class that represents metadata. There are three types of instructions:

• Component instructions: It uses views and controllers to create custom controllers and uses them as custom HTML elements.

• Decorative instructions: It uses additional behavior to decorate elements.

• Template directive: It converts HTML into a reusable template.

Dependency injection

Dependency injection is a design pattern that passes objects as dependencies in different components of an application. /b10> It creates an instance of a new class and its required dependencies.

When using dependency injection, you must keep the following in mind:

• Dependency injection is stimulated into the framework and can be used anywhere.

• The injector mechanism maintains service instances and can be created using providers.
  

• Providers are a way to create services.

• You can register the provider with the injector.