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 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:
- Defining views: sets of screen elements to choose from and modify as per program logic and data.
- 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:
- 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.
- 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:
- Templates, Directives, and Data Binding
- Services and Dependency Injection
We will now explore each block in individual detail.
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.
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:
- Event binding: event-based (user input) triggers to update application data and respond to user input.
- 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:
- Component directives: Used in the main class, defining the metadata about how the component should be processed, initiated, and executed.
- Structural Directives: Used to modify the contents of DOM. Often start with an asterisk (*).
- 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.
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:
- URL in the address bar to correspond to a particular page
- Hyperlinking of pages for navigation
- 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.
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!