How Does Angular Work?

 

Published On:

  September, 02, 2022
Read Time 17.85 Minute Read
Copy
var promise = new Promise((resolve, reject) => {
    resolve(“Promise Resolved”);
})
promise.then((success) => {
    console.log(success);
})
.catch(function(error) => {
    console.log(error);
});
// Output: Promise Resolved
How Does Angular Work?

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 completely follows component-based architecture to build robust and responsive single-page applications (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.

What is Angular Framework?

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

The developers working with an AngularJS development company typically uses Angular framework for implementing core and optional functionality as a set of TypeScript libraries.

Are You Planning To Develop Single-Page Application for Your Business?

Our talented Angular developers are proficient in designing and building front-end applications for all your business needs.

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

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

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

Application Configuration Files

index.html – It’s the main HTML page rendered for the Angular application 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 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).

 

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.

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:

  • 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.
  • 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).
  • 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 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.
  • 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 and directives are interconnected with each other. In simple words, we can say that directives and components both are essential building blocks of Angular applications.
  • 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. DI 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.

Drive Your Business Growth with Intuitive & Dynamic Single-Page Web Applications

Your search ends here as we help you provide the best and most cost-effective solutions for your development needs.

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 Bootstrapping Process

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, code flows to Appmodule from this main.ts.

Angular Loads Appcomponent

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.

Passed The Bootstrap Module in the Main.ts.

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.

Background When We Run NG Serve, or NG Build

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

  • With the help of the tsc TypeScript compiler, the compilation of application codes starts
  • Webpack is used for bundling and minification of javascript files.
  • The deployment and bootstrapping process take place.
  • Run JIT compiler for all components, 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.

Copy
"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 Angular 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 javascript codes using the configuration provided in tsconfig.json.

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

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

Copy
<!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 main.ts file; it has a couple of import statements along with some lines of code.

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

Looking For the Best Angular Development Services?

Albiorix has Angular developers that use cutting-edge technology to build creative web applications for clients.

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.

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

Conclusion

Finally, 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 functionality, angular 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.

Ankur Akvaliya is Sr. Software Engineer at Albiorix Technology. He is a dedicated and hard-working person to deals with any technological needs. He is prominent in working with object-oriented design, problem resolution, requirement gathering, and finally debugging the code.

Ankur Akvaliya

Ankur Akvaliya is Sr. Software Engineer at Albiorix Technology. He is a dedicated and hard-working person to deals with any technological needs. He is prominent in working with object-oriented design, problem resolution, requirement gathering, and finally debugging the code.

Key Clients

Get in Touch


    Our Offices
    Head Office & Development Center
    Albiorix Head Office India India

    A-804, Safal Profitaire, Prahladnagar,
    Ahmedabad, Gujarat 380015.

    Sales Office
    Albiorix Development Center Australia Australia

    81-83 Campbell Street,
    Surry Hills, NSW 2010, Australia