Angular8 Architecture

Angular8 Architecture

Angular 8 is a platform and framework which is used in HTML and TypeScript to build client applications.

Angular 8 is written in TypeScript. It implements both core and optional functionality as a collection of TypeScript libraries you can import into your applications.

An Angular application's basic building blocks are NgModules which provide a compiling context for components. NgModules gather the related code into functional sets; a collection of NgModules determines an Angular app. An application always has at least one root module that allows bootstrapping, and typically has a lot more feature modules.

• Components describe views, which are sets of screen elements that Angular can choose between and modify according to the logic and data of your application.
• Components use services which provide functionality that are not directly related to views. Service providers can be injected as dependencies into the components , making the code modular, reusable and efficient.

Key parts of Angular 8 Architecture:

Angular 8 Components

In Angular 8, all components and services are simply classes with decorators marking their types and providing metadata that direct Angular to do things.

Each Angular application always has at least one root component known to link a page hierarchy to page DOM. -- component defines a class that contains data and logic for the application, and is associated with an HTML template that defines a view to be displayed in a target environment.

Metadata of Component class

• The metadata for a class of components associates it with a template which defines a view. A template combines ordinary HTML with Angular directives and binding markup allowing Angular to change the HTML before display rendering.
• The metadata for a service class contains information that Angular needs to make available through Dependency Injection (DI) to the components.

Modules

Angular 8 NgModules vary from those of other JavaScript modules. Every Angular 8 app comes with a root module known as the AppModule. It provides the mechanism for bootstrap which launches the application.

In general, there are several functional modules available in any Angular 8 app.

Some important features of Anngular 8 Modules:

• Like other JavaScript modules, Angular 8 NgModules import the functionalities of other NgModules.
• NgModules allow the exportation and use of their own functionality via other NgModules. For example, you can import the Router NgModule if you want to use the Router service in your app.

Template, Directives and Data Binding

A template is used in Angular 8 to combine HTML with Angular Markup, and to modify HTML elements before display. Template directives provide logic for the system, and binding markup connects data from your application and DOM.

There are two types of binding to data:

1. Event Binding: Event binding is used to bind events to your software and by updating the application data to respond to user input in the target environment.
2. Property Binding: Property binding is used to transfer data into the HTML from component class and allows you to interpolate values that are derived from the data of your application.

Services and Dependency Injection

In Angular 8, developers build a data or logic service class that isn't associated with a particular view and want to share across components.

Dependency Injection (DI) is used to make the classes of your components lean and effective. DI does not fetch server data, validate user input, or log directly into the console; it simply makes services to these tasks.

Routing3

In Angular 8, Router is a NgModule that provides a service that allows developers to establish a navigation path between the various application states and to show hierarchies in their application.

It operates in the same way as navigation works in a browser. E.g.:

• Enter a URL in the address bar, and navigate the browser to the corresponding page.
• On a page, click the link and the user will navigate to a new page.
• Press back or forward buttons on the browser and the browser can move back or forward according to the history pages you have used.