Angular Architecture Overview

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....

Modules

...

Components

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 Module Feature modules are used to group related components, directives, pipes, and services together. Shared Module The most commonly used functionality will be present in the shared module which can be imported by the feature module whenever needed....

Templates

...

Directives

A Component is the building block of the angular application. A component consists of a template(HTML view of UI), styles(CSS appearance/design) and a typescript class which contains business logic. To indicate a class as component @Component decorator is used. The @Component decorator provides metadata to the component. The component metadata properties consist of selectors, directives, providers, styleUrls and templateUrls....

Services

...

Dependency Injection(DI)

The user interface or the view of the end users is defined using the template. Templates are created using HTML and it binds the component properties and methods thus helping us to render data dynamically. Template syntax includes directives, interpolation, built-in directives, template expression operators, property binding, and event binding for creating dynamic and interactive views....

Router

...

State Management

Directives are instructions in the DOM (Document Object Model). Directives are used in templates to customize the behaviour of the elements. Angular provides built-in directives like *ngIf and *ngFor, as well as custom directives created by developers. Types of directives: Component Directives These directives are associated with the template(view) of a component. Structural Directives These directives are used to change the structure of the DOM using *ngFor,*ngSwitch and *ngIf. Attribute Directives These directives are used to change the behaviour of the DOM using ngStyle,ngModel and ngClass. Custom Directives We can create custom directives using @Directive decorator and define the desired behaviour in the class....

HTTP Client

...