Angular 2 Architecture

Angular 2 is based on Components. The architecture shows us that the component is the main element and the Angular 2 application is a group of Components.

angular 2 architecture
angular 2 architecture
a component is a class
a component is a class

 

A Component is a Class that we can write in Typescript (Programming Language OOP) and this class will be compiled later to a Plain JavaScript (Browsers can only understand JavaScript).

Inside this Class we can configure our components using Metadata; we can use the metadata to:

  • Define the HTML Template (template :’< h2> Angular 2 architecture </h2>’).
  • Define the CSS Style (styles:’.my-css { color:red; }’ )

A Component is a Directive.

Yes, we have 3 types of directives:

  • Components.
  • Structural directives like ngFor (they change the DOM by adding or removing elements).
  • Attribute directives like ngStyle (the change the behavior or the appearance of elements).

We can use Directives to add some functionality to our Component.

components communicate with each other
components communicate with each other

 

How to make components communicate with each other?

The answer is: selectors and/or routing!

  • What are selectors: they are simple HTML Tags (e.g. <hello-world></hello-world>) (<my-component><my-component>).
  • Routing? To navigate from a View to another.

                     

Services
Services

In real life we need to bring some Data to our Component from a Database. We can do such thing with Services. A Service can be used to do more than bringing data to a component (e.g. : do some calculation )

Services are injected to Components.

Once Services are injected a component can then access the methods inside Services.

We will see how this mechanism of injection works later in our tutorials. And the power of Dependency injection (DI).

Angular 2 comes with a default unidirectional data binding flow. Data flows from Mother to children.

two-way data binding
two-way data binding

And we can use the two-way data binding if we want using directives.  [(ngModel)].

Discover more in our website. We share with you our experience. And we hope it can help you.