Angular Architecture: Overview and Concept

Written in TypeScript, Angular implements core and additional functionality as a set of TypeScript libraries. These are imported to Angular apps. Basically, Angular is a framework as well as a platform for building client applications in HTML and TypeScript.

Angular is one of the leading frameworks preferred by web developers around the world. As such, it is a lucrative option to add to your programming arsenal. Here are some of the best Angular tutorials to kickstart your Angular journey as well as to hone your extant Angular skills.
The Angular architecture is not so difficult to comprehend. Especially, when you are acquainted with the various concepts upon which the same is based. Therefore, before summarizing it all up, let us first know the underlying concepts in detail.

The 7 Constituents of any Angular App

There are several parts of an Angular application. Any Angular app is made up of 7 essential constituents. These are:

1. Components
2. Templates
3. Metadata
4. Data binding
5. Directives
6. Services 7.Dependency Injection a.k.a. DI

Components

It is mandatory for any Angular app to have at least one component. This is known as the root component. It connects a component hierarchy with the page DOM (Document Object Model). Regardless of the total number of components, an Angular app has, each component defines a class that has the application and data logic.
It simply means that what role a component will play in an application depends on the class of that component. Each class is associated with an HTML template that defines (means, how it will project something on a screen) a view in the target environment.

A class defined immediately below a @Component () decorator is identified as a component. After which, the decorator provides the application the template (discussed below) and related component-specific metadata (also discussed below).

What are Decorators?

Decorators are a distinct set of functions that modify JavaScript classes. Angular comes with a multitude of defined decorators, each of which attaches a specific kind of metadata to class in which they are used. It simply lets the system knows what those classes are and what should they do.

Know decorators better with Todd Motto.

Templates

As the name suggests, these are elements of Angular applications that combine HTML with Angular markup, which are able to modify HTML elements before projecting them on the screen.
Templates make use of pipes for improving the user experience. Pipes do so by transforming values for display. This simply means that pipes can be used to add a unit, like time and currency, as per to a user’s locale. Angular comes with a plethora of predefined pipes. However, it is also possible to define your own pipes. Here’s how!

Metadata

How the class will be processed depends entirely on metadata, as simple as that. A class decorator is used for attaching metadata to a class. Any class that has @Component class decorator attached to it, is known as the Component class.
For providing the necessary information required by Angular to create the component, class Decorator makes use of configuration object. Some of the configuration options are directives, selector, and templateURL.

Data Binding

Binding markup is responsible for connecting application data with the DOM. There are 2 types of data binding, namely:

Event Binding – Allow the application to respond to user input in the target environment. It does so by updating application data

Property Binding – Allows interpolation of values, which are computed from application data into the HTML

Changes in the DOM, like user choices, gets reflected in the program data. This is known as [two-way data binding]. It is achieved by means of a ngModel directive.

Directives

Template directives are responsible for providing logic. Prior to a view is displayed, Angular evaluates the directives and resolves the binding syntax present in the template for modifying the DOM as well as the HTML elements. This is done in accordance with the program data and logic. There are 3 types of directives:

Attribute Directives – Modify the behavior or appearance of a component, element, or another directive

Components – These are directives with a template

Structural Directives – Modify the DOM layout by adding or removing DOM elements

Services

A service class is created when there is a need for some data or logic that is not associated with a specific view. Moreover, this data or logic requires to be shared across components.

The service class definition immediately precedes the @Injectable () decorator. Its role is to provide that metadata, which allows the service to be injected into client components in the form of a dependency.

Dependency Injection (DI)

Simply, DI enables keeping the component classes lean and efficient. This enables the classes to delegate tasks such as fetching data from the server, log directly to the console, and validate user input to services.

Other Important Concepts

Besides the 7 fundamental parts of a typical Angular application, two more concepts are at play. These are Modules and Routing, each of which is described as follows:
Modules

Each Angular application has a root module, named AppModule. It provides the bootstrap mechanism for launching the application. Generally, an Angular application contains several functional modules.

Though NgModules differ from JavaScript (ES2015) modules, the former complement the latter. Nonetheless, NgModules allow import and export of functionality from and to, respectively, other NgModules. This is similar to JavaScript modules.
The purpose of an NgModule is to declare the compilation context for a set of components. These components might belong to an application domain or a workflow. In order to form functional units, an NgModule can associate its components with related code, like services.

In order to facilitate the development of complex applications, the code can be organized into distinct functional modules. Further, doing so assists in designing for reusability and benefitting from lazy loading that minimizes the time required for the code to load at startup of an application.

Routing

Router NgModule helps in defining a navigation path between many applications states and view hierarchies in an Angular application. This special NgModule is modeled after the popular browser navigation conventions, which are:
Enter some URL in the address bar of the browser to navigate to the corresponding page

Clicking links on a webpage allows the browser to navigate to a new webpage
Clicking on the back and forward buttons in the browser correspond to navigation backward and forward, in the respective order, through the browser history
Instead of pages, the router maps URL-like paths to views. As soon as a user performs some action, the router intercepts the browser’s behavior and responds by hiding or showing view hierarchies. How a router will interpret a link URL depends on the app’s view navigation rules and data state.

Routers also make use of lazy loading. This is done in case the router finds that a module that defines some particular functionality required by the current application state has not been loaded.

The router logs activity in the browser history. This allows the back and forward buttons to work. Navigation to new views is done when the user clicks a button or selects something from a drop box. Or, it might be in response to some other action from a source.

Navigation paths are associated with components for defining the navigation rules. A navigation path makes use of a URL-like syntax, which integrates with the program data. This is analogous to how a template syntax integrates views with the program data.

Thereafter, program logic is applied to choose which views to show and which ones to hide as per the user input and defined access rules.

How it all Works!

NgModules are the basic building blocks of any Angular application because they provide a compilation context for components. Any Angular application is defined by a set of NgModules. These NgModules collect related code into functional sets.
An Angular app has at least a root module, which enables bootstrapping and several feature modules. Components define views. These are sets of screen elements that are chosen and modified as per the program logic and data.

Furthermore, components make use of services that provide specific functionality not directly related to views. Services providers are injected into components as dependencies. This makes the code efficient, modular, and reusable.

Components as well services are classes. Decorators mark their type and provide metadata that decides how to use each of them. The metadata for some component class associates the same with a template, all for defining a view.

A template combines normal HTML code with Angular directives as well as binding markup, which allow Angular to modify the HTML before rendering the same for display. The metadata for a service class offers the information that the Angular needs to provide to the components via DI.

This sums up the concept of Angular architecture. To have a better understanding of the same, practice is the key. It will help you develop a sharp understanding of how Angular applications exactly work.