How Does Angular Work?

Ankur Akvaliya

CO-CTO

Published On: May 12, 2023

Angular is a framework for building client-side web applications. It typically uses HTML, CSS and TypeScript language. The exciting part of the Angular framework is that Google develops it.

Angular provides developers robust tools for the development of client-side web Applications. Angular is a purely Javascript framework that completely follows component-based architecture to build a robust and responsive single-page application (SPA).

But the main question arises in mind: how does Angular work? So we have covered detailed information about the scenes of working on the Angular applications.

Key Takeaways

What is Angular Framework?

Angular is an open-source framework as well as a platform that is designed explicitly for developing web apps and single-page applications. Angular is written in TypeScript programming language and strictly follows HTML template and a great declarative language for building robust web applications.

The developers working with an AngularJS development company typically uses Angular framework to design and build scalable web applications by implementing core and optional functionality as a set of TypeScript libraries.

Understanding Angular App Development Structure

After exploring the basic concept of what is Angular framework, it’s time to understand how Angular works, it becomes essential for the developers to deeply analyze the workspace structure and application configuration involved in the Angular structural framework process.

Every Angular app works in the form of a workspace. By default ng new name_of_application command generates a skeleton application at the root of the workspace in the below fashion.

workspace/(folder name is name_of_application given at cmd)
... (workspace-wide config files)
src/ --(source and support files for application)

The developers usually refer to this structure as a ‘multi-repo’ development style where each application has its workspace. In addition, the ‘workspace’ folder consists of workspace-specific configuration files, whereas the ‘src’ folder consists of application-specific files and folders.

Let’s see details about the essential configuration files related to the workspace for building dynamic applications.

Workspace Configuration Files

• angular.json – The file manages the workspace and project-specific defaults for every Angular build and development purpose. No matter how many npm packages the developers have installed in the workspace, they need to specify the list of packages to be used when they need them in your application in angular.json.
• package.json – This AngularJS framework file includes the project’s metadata and plays an essential role in managing the project’s dependencies, scripts, npm package versions and many more.
• package-lock.json – This file includes all the information related to npm packages installed in the npm_modules folder. Some info like package version, hash to verify the package integrity and list of its dependencies are included in the file.
• tsconfig.json – TypeScript is a language developers typically use to develop Angular apps. This file specifies root files and compiler options required to compile our web application development process.

Application Configuration Files

index.html – It’s the same page of HTML rendered for the AngularJS app and displayed to the user in the browser.
main.ts – It’s an important file in the Angular application and is responsible for compiling all reusable components and template files with JIT(Just In Time) compiler. Moreover, the developers can also use the Ahead Of Time compiler by adding –aot flag to ng build or ng serve CLI commands(Recommended for production environment).

Related Post: What is Promise in Angular

How Does Angular Work?

In an Angular application, a module is nothing but a collection of components, directives, pipes, and services that are typically used in the application. All such groups communicate with each other to effectively build robust functionality to make your application secure and robust.

Angular comes up with a list of built-in modules like the HTTP module (to make an HTTP call from the application), and an extensive enterprise application is nothing but a collection of such modules.

Below are the eight building blocks of Angular application that every developer typically use on a regular basis to make smooth application development process:

• Modules: For every Angular application, you will have only one root module named AppModule. The module usually provides the Angular developers with the bootstrap mechanism that makes it easy to launch the new application secure and robust.
• Components: Like modules, every Angular project contains at least one component, the root component. The primary role of the root component is to connect the component hierarchy with a page document object model (DOM) element.
• Services: The Angular developers create a service class when no specific data or logic is associated with the particular view. In addition, the developers can even share the data or logic among different reusable components. The @Injectable decorator immediately precedes the service class definition.
• Templates: Angular templates are nothing but a combination of HTML and Angular markup. The primary aim of such templates is to modify HTML elements before they are displayed quickly. In addition, template directives provide program logic, and binding markup connects your application data and the DOM manipulation.
• Metadata: Metadata is nothing but an instructor that informs Angular about how to process a class. It is designed explicitly to decorate the class so that the developers can quickly configure the expected behavior of a class.
• Data Binding: The Angular data binding concept typically handles real-time communication between a template and its related component. Moreover, data binding is also a boon for communication between parent and child components.
• Directives: Angular components libraries and directives are interconnected with each other. In simple words, we can say that directives and components both are essential building blocks of blocks of Angular web apps.
• Dependency Injection: The primary role of the Angular developer is to keep the component classes short and straightforward. And that’s what Dependency Injection (DI) does. Dependency Injection eliminate such task and is not responsible for fetching data from a server, validating the user input, or logging directly into the console.

To know more about each building block in detail, click here.

Angular Bootstrapping Process

When an Angular application loads, that specific process is known as bootstrapping. Generally, the Angular project file structure is divided into three categories:

• Application files
• Bootstrap files
• Configuration files

The below figure demonstrates the exact location of these files.

Angular application’s bootstrapping process usually initiates from the main.ts file. This file includes the basic configurations for the main module that need to be loaded initially.

In the below figure, you can see that we have passed the bootstrap module in the main.ts. Subsequently, write code flows to Appmodule from this main.ts.

In an App module, we can define a bootstrap Array specifically at the @NgModule decorator. So, at this point, Angular loads AppComponent as the root component on UI.

Let’s recall; Bootstrapping is the technique of initializing the root module and loading the root component into the index.html file In the Angular eco-system. So multiple things happen in the background when we run ng serve, or ng build.

Related Post: Angular Promise vs Observable

Now, let’s see how a bootstrapping process works step-by-step.

• With the help of the tsc TypeScript compiler, the compilation of application Javascript code starts.
• Webpack is used for bundling and minification of javascript files.
• The deployment and bootstrapping process take place.
• Run JIT compiler for all components, AngularJS directives and pipes.
• Render index.html in the browser.

Do you know the primary difference between JIT and AOT compiler?

In the AOT compiler, the compilation process usually occurs during build time, whereas in JIT, the compilation happens during runtime in the browser.

The angular.json file usually includes multiple configuration properties related to building and development. However, the ‘builder’, ‘index’ and ‘main’ properties under ‘build’ are the essential parameters that play a vital role in Angular development.

"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
.......
"index": "src/index.html",
"main": "src/main.ts",
.......
}

So, once the developer gives the command ng serve or ng build, Angular CLI searches for angular.json for these specific properties.

‘builder’ property informs Angular CLI where it can find developers to build Angular apps for the browser environment.
‘index’ and ‘main’ properties help AngularJS developers to specify an index.html file to be rendered in the browser and main.ts, which handles the bootstrapping process.

Now, it’s time for the Angular CLI to call the typescript compiler to transpile all the typescript codes into a javascript code using the configuration provided in tsconfig.json.

And if we talk about “index.html” file, you’ll see only element defined inside the tag. is the root component template language injected specifically at runtime.

Apart from these, there is neither any javascript file nor any reference to style links.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample Application</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="styles.a7a7ed6d783a0950.css" media="print" onload="this.media='all'">
  <noscript>
    <link rel="stylesheet" href="styles.a7a7ed6d783a0950.css">
  </noscript>
</head>
<body>
  <app-root></app-root>
  <script src="runtime.0298365924d274ea.js" type="module"></script>
  <script src="polyfills.daf14d28d6c3636f.js" type="module"></script>
  <script src="main.94e04dd2c597738f.js" type="module"></script>
</body>
</html>

Once the angular developer transpiles the typescript codes, Angular CLI uses Webpack to minify and bundle all the essential files easily. And such files are then added as a reference to the index.html file.

Let’s look at the working of each file:

• runtime.js – It contains utility codes used by Webpack, making it easy for the developers to load other files.
• vendor.js – It has 3rd party library codes which are imported into ngModules.
• polyfill.js – It contains the polyfills required to make the app compatible among different browsers.
• main.js – It contains all the javascript codes written in our application.

When the developer runs the ng serve command, application codes are specifically built in the local environment and served from memory. On the other hand, ng build returns all the transpiled codes into the dist folder, which can be deployed to any hosting vendor and served from there.

At runtime in the browser, main.js is one file solely responsible for bootstrapping Angular apps. Therefore, it is a crucial file containing all application codes and how to compile and run them. And as we know that Angular CLI search for angular.json to get the main.ts file.

Let’s look at the static documents like main.ts file; it has a couple of import statements along with some lines of code.

import { enableProdMode } from '@angular/core';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

Instead of using import statements, the developers can utilize the business logic code to enable production mode if the target environment is production. In the above code, the line platformBrowserDynamic().bootstrapModule(AppModule);. defines a lot of action when executed by Angular CLI.

As we can see from the above code, you need to import the platformBrowserDynamic module from the @angular/platform-browser-dynamic library.

Next, the developer calls platformBrowserDynamic().bootstrapModule(AppModule) by passing the root AppModule as a parameter.

Behind the scenes, the bootstrapModule is responsible for creating a JIT compiler instance where it crawls through all components, directives and pipes declared in AppModule @NgModule decorator and other feature modules imported in AppModule.

Once it finds the Component having ‘app-root’ as its selector, it will render the component template in index.html.

But how does Angular know where to find a template for in index.html? Let’s find out in the next section.

The root AppModule we passed earlier refers to the @ngModule decorator in AppModule. @NgModule decorator contains metadata of all the components, directives and pipes, along with other feature modules imported under AppModule.

It also specifies services available at the app level under providers and bootstrap property, specifying the root component as shown below.

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Once the developers identify the root AppComponent, it utilizes the @Component decorator in AppComponent. @Component contains metadata of the below properties :

• selector: It is used to identify all the components in the Angular app.
• templateUrl: It provides a path to the component HTML template file.
• styleUrls: It gives the path to component styles.

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Sample Application';
}

There it is! app-root specified in selector matches with app-root in index.html. It then finds an HTML template along with styles and renders the same in index.html where app-root is present.

Related Post: Resolver in Angular

Conclusion

Finally after this post on how angular application works, we can say that an Angular application is a tree to component and these components are further enabled to add behavior to UI through

• Services
• Pipes
• Directives
• Dependency injection, and
• Modules

Such aspects are basically a logical unit of a big application, many modules are tied together to build a robust Angular Application.

For some core and basic key features, AngularJS solves majority of issues as it provides us with some built-in modules, pipes and directives 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 modules and an enterprise-level Angular application.

Contact Albiorix to unlock limitless possibilities with Angular to build the next-generation, modern, and responsive web application for business. Our dedicated Angular developers create stunning web applications using their expertise.