Updated March 31, 2023
Introduction to Angular
How Angular Works(also referred to as Angular 2+(plus)) is framework for building client side web applications using HTML, CSS and TypeScript. Angular is written in TypeScript and is developed by Google. Angular provides developers robust tools for development of client side web Applications. Angular completely follows component based architecture and single page application (SPA). Angular follows semantic versioning based on MAJOR.MINOR.PATCH scheme.
Component-based Architecture of Angular
Angular follows component based architecture, in component-based architecture, a large application is broken (decoupled) into functional and logical components. These components are reusable hence can be used in any other part of the application. These components are independent hence can be tested independently, this architecture makes Angular code highly testable.
The above diagram depicts the component based architecture an Angular Application typically follows, here Order-App is a parent component, and is having three child components namely menu-list, meal of the day and order-summary. As it is very clear from diagram that this app in nothing but the tree of components, this is the case with every angular application, all angular Applications are tree of components.
How does Angular Works?
Modularity and Working of an Angular Application:
A module in Angular application is a group of the components, directives, pipes, and services, which are related to the application and collectively build a common functionality. Angular provides a lot of build in modules such as http module (to make http call from application) and a big enterprise application is nothing but collection of such modules. For example, in the above image order app can be a part of bigger module. It is mandatory for every angular application to have a root module.
Listed are main building blocks of an Angular Application, these are tied to build an Angular Application.
- Modules
- Components
- Services
- Templates
- Metadata
- Data binding
- Directives
- Dependency Injection
This diagram form official Angular documentation of Angular illustrates, how these building blocks interact with one other to create an angular module, and at end modules are integrated to build an angular Application.
Modules: In Angular a module is the group of building blocks such as components, services, templates, directive, pipes that combined to build a functional unit a typical example of module is httpclient module of Angular, as it helps us to make network call. Many modules combine together to build an angular application.
Components: Components are build blocks of UI; these are quite reusable across module and Application. A component in Angular consists of a class file, a template (HTML template) and a css/ scss or less file for styling the component.
Services: Services are singleton object classes in Angular Application. Injecting services in components is a common pattern to share data across components in Angular.
Templates: Template are the HTML view with the help of component class file, template generate building block of the user view.
Metadata: In Angular metadata is used decorate a class to give it a basic configuration. For example, all the components are decorated with @Component decorator and pipes with @pipe decorator, this is example of metadata in Angular.
Data binding: For data binding Angular supports property, event and attribute binding from component typescript to template view, with ngModel directive Angular also provides two-way data binding.
Directives: In Angular directives are way to instruct DOM. Directives attach specific behavior to the DOM and help us to transform UI per business logic or user interactions.
- Component Directives
- Structural Directives
- Attribute Directives
Dependency Injection: Dependency injection in the way how an Angular class receives its dependencies, Dependency injection allows a class receive dependencies from another class. Most of the time in Angular, dependency injection is done by injecting a service class into a component or module class. The above diagram displays the basic working and composition of the Angular Application. Angular component are basic building blocks of UI and these component are attached with template via property and event binding, Directive in Angular can manipulate the viewas per user interaction or data model and logic, *ngIf, *ngFor are example of most common directive provided by Angular, we can also build our own directives. In Angular directives may or may not have template or view. Dependency injection is also one of the core feature of Angular framework. Dependency injection is
nothing but an approach to provide dependencies to a part of code, primarily components in Angualar’s case. As a common pattern in Angular services are singleton and can be injected in the components to give components the access of methods and properties of the service, so this common instance of service can be injected in multiple components to share data across application.
At end this collection of services, components, pipes and directives bundles to build a functional unit of the application, we call this functional unit as module in Angular and many such modules are tied together to build a full-fledged angular application.
How an Angular Application Bootstraps?
Bootstrap process is how an Angular Application loads initially. At a very top level, we can divide Angular project file structure in three categories:
- Application files
- Bootstrap files
- Configuration files
Bootstrapping of Angular application starts from main.ts file, in main.ts file we have configuration for the main module to be loaded initially. As below screen at line number 11 shows in main.ts we pass bootstrap module, from this main.ts, code flows to Appmodule.
In App module, at @NgModule decorator array, we have a bootstrap Array, here the bootstrap component is provided or added, so at this point Angular loads AppComponent as root component on UI.
Conclusion
we can say that an Angular application is the tree to component and these component are further enabled to add behavior to UI through services, pipes, directives, dependency injection, and modules are logical unit of a big application, many modules are tied together to build a robust Angular Application.
For some core and basic functionality angular provides us with some build in modules, pipes and directive and we can also create our own building blocks and tie them together to build an enterprise level application. So in nutshell Angular Application Works as a component of trees tied together to build module and an enterprise level Angular Application
Recommended Articles
This is a guide to How Angular Works. Here we discuss the introduction to Angular, modularity and working, how an Angular Application Bootstraps. You can also go through our other related articles to learn more –
