Explain the Architecture Overview of Angular ?

Angular is a client-side front-end framework developed by a team of developers at Google based on Typescript. It is used for building dynamic and single-page web applications (SPAs). Also, Angular is a versatile framework for building web applications and offers a wide range of features and tools to streamline the development process and create robust and maintainable applications.

Angular Architecture Overview

To develop any web application, Angular follows the MVC (Model-View-Controller) and MVVM (Model-View-ViewModel) design patterns, which facilitates a structured and organized approach to designing the application, along with making it easier to manage code, improve maintainability, & etc. These types of design patterns usually maintain a clear distinction between data (Model), user interface (View), and logic (Controller/ViewModel), which results in more scalable and testable applications. It also provides code reusability and ensures a smoother development process for large & complex projects.

An Angular Application contains the following building blocks:

Table of Content

We will explore the above topics & will understand their basic syntaxes.

Modules

• A Module is a unit that consists of a separate block to perform specific functionality and enables us to break down the application into smaller chunks.
• In a module, we can export & import the components and services from other modules.
• Modules are created using the @NgModule decorator.
• Types of Modules:
  • Core Module/Root Module
    • Every Angular application must have at least one root module, which is called the AppModule, defined in the app.module.ts file.
    • The root module is the top-level module in an Angular application.
    • It imports all of the other modules in the application.
    • Feature modules are used to group related components, directives, pipes, and services together.
    • The most commonly used functionality will be present in the shared module which can be imported by the feature module whenever needed.

    Example: app.module.ts