Angular Architecture

The main building blocks of Angular are:

• Modules
• Components
• Templates, Directives, and Data Binding
• Services and Dependency Injection

Modules

Angular apps are modular and Angular has its own modularity system called Angular Modules or NgModules.

Every Angular app has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules.

NgModules can import functionality from other NgModules, and allow their own functionality to be exported and used by other NgModules.

NgModule is a decorator function that takes a single metadata object whose properties describe the module. The most important properties are:

• declarations - declares the components, directives and pipes used in the application.
• exports - the declarations that could be used in the component templates of other modules.
• imports - the declarations of other modules that could be used in this module.
• providers - the declarations of the singleton services that could be used throughout the application.
• bootstrap - the root module sets the root component that hosts all other app view at the start of the application.

Components

Every Angular application has at least one component, the root component that connects a component hierarchy with the page document object model (DOM).

Each component defines a class that contains application data and logic, and is associated with an HTML template that defines a view to be displayed in a target environment.

The @Component() decorator identifies the class immediately below it as a component, and provides the template and related component-specific metadata.

Decorators are functions that modify JavaScript classes. Angular defines a number of decorators that attach specific kinds of metadata to classes, so that the system knows what those classes mean and how they should work.

Templates, directives and data binding

A template is a form of HTML that tells Angular how to render the component. A template combines HTML with Angular markup that can modify HTML elements before they are displayed. 

Template directives provide program logic, and binding markup connects your application data and the DOM. There are two types of data binding:

• Event binding lets your app respond to user input in the target environment by updating your application data.
• Property binding lets you interpolate values that are computed from your application data into the HTML.

Before a view is displayed, Angular evaluates the directives and resolves the binding syntax in the template to modify the HTML elements and the DOM, according to your program data and logic. Angular supports two-way data binding, meaning that changes in the DOM, such as user choices, are also reflected in your program data.

• The {{product.name}} interpolation displays the component’s name property value within the <li> element.
• The [product] property binding passes the value of selectedProduct from the parent ProductListComponent to the product property of the child ProductDetailComponent.
• The(click) event binding calls the component’s selectProduct method when the user clicks a movies’s name.

Services and dependency injection

For data or logic that is not associated with a specific view, and that you want to share across components, you create a service class. A service class definition is immediately preceded by the @Injectable() decorator. The decorator provides the metadata that allows your service to be injected into client components as a dependency.

Dependency injection (DI) lets you keep your component classes lean and efficient. They don't fetch data from the server, validate user input, or log directly to the console; they delegate such tasks to services.

(Note: *** Here I am just mentioning the brief details of the topics as I will be covering these topics in detail in the coming articles. This is just to make you familiar with the Architecture.)

Resource: https://angular.io

When you're familiar with these fundamental building blocks, you can explore them in more detail.