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.
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 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.
Example: app.module.ts
Components
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.
Example: app.component.ts
Templates
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.
Example: app.component.html
Directives
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.
Example:
app.component.html
app.component.ts
uppercase.directive.ts
Services
Services are used when specific data or logic needs to be used across different components.
Services are typically used to centralize data access, HTTP requests, state management, and other common tasks.
Services are singleton and are registered with Angular's dependency injection system.
Components can inject services to access their functionality and data.
DI is a design pattern which increases the flexibility and modularity of the applications by producing and distributing specific parts of the application to other parts of the application that need them.
We can inject services, configuration values, and other objects into components and services.
Components and services can declare their dependencies and have them injected automatically using @Injectable decorator.
Router
The Angular Router manages navigation within the application for changing from one view to another view.
Routes are defined in the app-routing.module.ts file and map to specific components.
The router also supports route parameters, route guards, and child routes for creating complex navigation structures.
Example: app-routing.module.ts
State Management
State management in angular is achieved using RxJS (Reactive Extensions for JavaScript).
RxJS is used for handling asynchronous operations, such as handling HTTP requests, user interactions, and event-driven programming.
Streams of data and events are managed by Observables which is provided by RxJS.
HTTP Client
HTTP client module in angular is used for making HTTP requests to interact with backend services(API calls) to fetch or send data.
