Angularjs is a JavaScript-based open-source front-end web framework used to build dynamic single-page applications (SPA). It follows the model-view-controller (MVC) architecture, although it is more accurately described as MVVM (Model-View-ViewModel) or MVW (Model-View-Whatever) due to its flexibility.

Key Components of AngularJS Architecture

There are some components of angularjs architecture are as follow,

Model:

• The model is the data source of the application.
• It represents the data and logic of the application.
• Angularjs supports two-way data binding, so when the model changes, the view reflects the change and vice versa.

View:

• The view is the HTML markup where AngularJS expressions and directives are used.
• It displays data from the model to the user and reacts to user interactions.
• AngularJS extends HTML with custom directives, such as ng-model, ng-bind, ng-repeat, etc.

Controller

• The controller is a JavaScript function that manages scope and business logic.
• It initializes the model and handles user input.
• It is connected to the view through the $scope object.

Scope

• An object that connects the controller and the view.
• Acts as a glue between the model and the view.
• Any change in the scope is automatically reflected in the view (due to two-way data binding).

Directives

• Special tokens (HTML attributes) in markup that tell Angularjs to do something with a DOM element.
• Examples: ng-model, ng-bind, ng-if, ng-repeat.
• You can also create custom directives for reusability.

Expressions

• Expressions are used to bind data to HTML.
• Written inside {{ }} and behave like JavaScript expressions.
• Automatically updated when the scope data changes.

Filter

• Used to format data before showing it to the user.
• Example: currency, date, filter, lowercase, uppercase.

Services

• Reusable business logic or functions that can be injected into controllers, directives, filters, etc.
• Example: $http, $location, $timeout.

Dependency Injection (DI)

• A design pattern used to inject dependencies such as services into controllers or other components.
• Promotes modularity and testability.

Routing (ngRoute / UI-Router)

• Used to create single-page applications with multiple views.
• Maps URLs to templates and controllers.
• Enables deep-linking and navigation without reloading the page.

AngularJS Flow Overview

• The user interacts with the view (HTML).
• The view is bound to a scope object.
• The controller updates the model through the scope.
• AngularJS detects model changes using the digest cycle and updates the view accordingly.
• Optional services and filters can be used for logic and presentation.