Introduction to Angular 11 Architecture

Angular is a Google-backed framework for developing client applications using TypeScript. It offers a set of pre-implemented functionalities as TypeScript libraries for off-the-shelf starter code pertaining to individual requirements. One only needs to set up the basic Angular environment and import these libraries on the go in their web applications.

The framework started its journey as a JavaScript library, then known as AngularJS. Considering its mass support from the development community, it emerged as a full-fledged framework from Angular 2+. In order to get started and become proficient, it is important to understand the architecture of the framework, that is, its building block components and the relationships between them. In this article, we will present an overview of the latest version of the Angular framework’s architecture (Angular 11). We will use the top-down approach, discussing the high-level overview down to the low-level technicalities, explicitly mentioning the architectural changes specific to Angular 11.

Architecture Overview

The core building blocks of the Angular framework are its components which are then organized into NgModules. The NgModules are the functional sets of code integrated together to define an Angular app. Each app has at least one root module (to enable bootstrapping) and one root component (to connect with the hierarchy of DOM). In addition, there may be numerous other feature modules and components.

Diving further, components offer two important use-cases, namely:

1. Defining views: sets of screen elements to choose from and modify as per program logic and data.
2. Using services: Service providers are injected into components as depending to make code modular, reusable, and efficient.

Together, components, services, and modules are classes that use decorators. This allows for marking their type and providing metadata:

1. Metadata for Component associates it with a template to define views. Templates are generic HTML layouts with Angular directives and binding markups to modify views before rendering.
2. Metadata for service class associates information about dependency injection to make it available for components.

In essence, an app has multiple components, modules, and services, wherein, each component defines multiple views, and each module defines multiple features. Views are generally arranged in a hierarchical order. In addition, Angular offers a Router service, which uses in-browser navigational capabilities for defining navigation paths.

In essence, Angular architecture consists of the following key building blocks, namely:

1. Modules
2. Components
3. Templates, Directives, and Data Binding
4. Services and Dependency Injection
5. Routing

We will now explore each block in individual detail.

Modules

Angular modules are called NgModules and are complementary to standard JavaScript modules. They are used to declare compilation contexts for components often dedicated to the application domain, workflow, and associating functional units of closely related code and services.

As discussed earlier, each app has at least a root module to enable bootstrapping, which, as per convention, is named AppModule. Numerous other feature modules for unit functionalities may also be contained in a complex application. Moreover, similar to JavaScript modules, Angular’s
NgModules can be imported and exported to other modules. A trivial example is the importing of router service in an app, which is imported from the Router NgModule.

Angular fosters the use of unit functional modules for the development of complex applications in an attempt to improve reusability and lazy-loading (on-demand loading of modules to minimize code loaded on startup).

Angular 11 offers experimental Webpack 5 support — an asset and module bundler to efficient build processing.

Components

Similar to modules, each Angular app has at least one root component which connects the hierarchy to DOM (document object model). Each component class is linked to an HTML template defining a view, along with application data and logic. The @Component decorator identifies the template and component-specific metadata. Angular 11 also includes a parallel
function to make it easier to with asynchronous actions in tests by enabling parallel asynchronous execution with components.

Templates, Directives, and Data-binding

Templates, directives, and data binding are often used in conjunction with each other. The template defines the HTML with Angular markups like directives to provide program logic, and data binding to connect application data with DOM. The two types of binding available in Angular are:

1. Event binding: event-based (user input) triggers to update application data and respond to user input.
2. Property binding: interpolation of computed data from application data into the HTML.

This particular use case of using templates, directives, and data binding allow for modifying the HTML elements before rendering them. This way dynamic solutions can be created based on program logic and user behavior. Angular, as an integral part of its core architecture, supports two-way data binding, which means that changes in DOM are also reflected in program data.
Two-way data binding is a distinguishing feature of Angular which is not available in its direct competitor frameworks like React.

Another key feature supported by Angular is the use of pipes to dynamically enhance the user experience by modifying values for today. Pre-defined pipes like dates and currency values can be used to cater to the user’s locale or custom ones can be defined for peculiar and tailored logic.

Angular directives can be classified into three types, namely:

1. Component directives: Used in the main class, defining the metadata about how the component should be processed, initiated, and executed.
2. Structural Directives: Used to modify the contents of DOM. Often start with an asterisk (*).
3. Attribute Directives: Used to change the look and behavior of DOM elements.

Angular 11 also includes stricter types for DatePipe and number pipes, to catch misuses such as passing an array or Observable.

Services and Dependency Injection

For cases where program logic or data may not be linked with a particular view, service class comes in handy. It allows for logic or data to be shared across components by instantiating a service class. It is immediately preceded by the decorator named @Injectable, providing the metadata to inject other providers’ dependencies into your class.

Dependency Injection is used in conjunction with the service class for delegation. It allows for keeping component classes agile and efficient by not fetching data from the server or validating user events. Instead, such tasks are managed for and delegated to services.

Angular 11 now includes an improved version of Language Service to enable a powerful and more accurate experience. Language Service is used to get completions, errors, hints, and navigation inside Angular templates. For the core, a migration is added that finds all imports and
calls to the deprecated async function @angular/core/testing and replaces them with waitforasync. For service-worker, an UnrecoverableStateError notification is added, fixing an issue in which a broken state would arise where only parts of an application would load properly. This situation used to arise when the browser eagerly cached evicted assets from the cache that cannot be found on the server anymore.

Routing

The Router NgModule is a service to define navigation paths and view hierarchies. This module is modeled after the standard browser navigation conventions, some of which are:

1. URL in the address bar to correspond to a particular page
2. Hyperlinking of pages for navigation
3. Integrating with the browser’s local history for navigating forward and backward

The Router achieves this by mapping paths to views instead of pages. For those familiar with .NET MVC, the relationship between View and Router would seem trivial. The router also sets the page navigation to become more dynamic by intercepting browser behavior and displaying relevant navigational hierarchies.

Lazy-loading of Router is also distinguished by its ability to check whether a module for a particular page is not yet loaded and then loading it on-demand. To define navigation rules, navigation paths need to be linked with components. Paths use URL-like syntax in a similar fashion to template syntax’s integration with views and data. Custom rules can be set as to
which views to display or hide in response to a particular event or program logic.

The router in Angular 11 changes the default value of relativeLinkResolution from “legacy” to “corrected.” The migration updates RouterModule configurations that use the default value to now specifically use “legacy” to prevent breakages during updating. Further, for code refactoring, Angular 11 adjusts the parameters of navigateByUrl and createUrl to be more accurate.

Conclusion

So, this was all about the introduction of the Angular 11 architecture. I hope that it was an amazing read and introduced you to the core concepts of Angular 11. After learning about the architecture, you can now easily navigate through the pieces and understand the width of the framework and build quality applications using Angular. Good luck!