Angular 8 Architecture

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

Angular 8 is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you can import into your apps.

The basic building blocks of an Angular application are NgModules, which provide a compilation context for components. NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules. An app always has at least a root module that enables bootstrapping, and typically has many more feature modules.

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

Key parts of Angular 8 Architecture:

Angular 8 Components

In Angular 8, Components and services both are simply classes with decorators that mark their types and provide metadata which guide Angular to do things.

Every Angular application always has at least one component known as root component that connects a page hierarchy with page 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.

Metadata of Component class

• The metadata for a component class associates it with a template that defines a view. A template combines ordinary HTML with Angular directives and binding markup that allow Angular to modify the HTML before rendering it for display.
• The metadata for a service class provides the information Angular needs to make it available to components through dependency injection (DI).

Modules

Angular 8 NgModules are different from other JavaScript modules. Every Angular 8 app has a root module known as AppModule. It provides the bootstrap mechanism that launches the application.

Generally, every Angular 8 app contains many functional modules.

Some important features of Anngular 8 Modules:

• Angular 8 NgModules import the functionalities form other NgModules just like other JavaScript modules.
• NgModules allow their own functionality to be exported and used by other NgModules. For example, if you want to use the router service in your app, you can import the Router NgModule.

Template, Directives and Data Binding

In Angular 8, a template is used to combine HTML with Angular Markup and modify HTML elements before displaying them. Template directives provide program logic, and binding markup connects your application data and the DOM.

There are two types of data binding:

1. Event Binding: Event binding is used to bind events to your app and respond to user input in the target environment by updating your application data.

2. Property Binding: Property binding is used to pass data from component class and facilitates you to interpolate values that are computed from your application data into the HTML.

Services and Dependency Injection

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

Dependency Injection (DI) is used to make your component classes lean and efficient. DI doesn't fetch data from the server, validate user input, or log directly to the console; it simply renders such tasks to services.

Routing3

In Angular 8, Router is an NgModule which provides a service that facilitates developers to define a navigation path among the different application states and view hierarchies in their app.

It works in the same way as a browser's navigation works. i.e.:

• Enter a URL in the address bar and the browser will navigate to that corresponding page.
• Click the link on a page and the browser will navigate to a new page.
• Click the browser's back or forward buttons and the browser will navigate backward or forward according to your seen history pages.