Angular Application Working

javascript Aug 13, 2019

Understanding How an Angular Application Works

Angular can seem like magic when you first start using it, and it is easy to become wary of making changes to the project files for fear of breaking something. Although there are a lot of files in an Angular application, they all have a specific purpose, and they work together to do something that far from magic: display HTML content to the user. In this section, I explain how the example Angular application works and how each part works toward the end result.

Understanding the HTML Document

The HTML document that is sent to the browser by the development HTTP server is the first part of the process. When the browser requests the default URL, such as http://localhost:4200, the development server responds with the contents of the index.html file in the src folder, which contains the following elements:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

The body contains only an app-root element, whose purpose will become clear shortly. As it processes the HTML document, the development HTTP server populates the body with script elements that tell the browser to load the bundle files created during the build process, like this:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script></body>
</html>

Understanding the Application Bootstrap

Browsers execute JavaScript files in the order in which their script elements appear, starting with the runtime.js file, which contains the Angular framework code. For most projects, the interesting file is main.js, which contains the custom application code. This is the file that contains the code defined in the main.ts file, which starts the application and relies on the code contained in the other JavaScript files. Here
are the statements added to the main.ts file by the ng new command when it creates a project:

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.log(err));

The import statements declare dependencies on other JavaScript modules, providing access to Angular features (the dependencies on @angular modules) and the custom code in the application (the AppModule dependency). The final import is for environment settings, which are used to create different configuration
settings for development, test, and production platforms, such as this code:

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

Angular has a production mode that disables some useful checks that are performed during development . Enabling production mode means provides a performance increase and means that the results of the hecks are not reported in the browser’s JavaScript console where they can be seen by the user. Production mode is enabled by calling the enableProdMode function, which is imported from the @angular/core module.

To work out whether production mode should be enabled, a check is performed to see whether  environment.production is true. This check corresponds to the contents of the envirionment.prod.ts file in the src/envirionments folder, which sets this value and is applied when the application is built in preparation for deployment. The result is that production mode will be enabled if the application has been built for production but disabled the rest of the time. The remaining statement in the main.ts file is responsible for starting the application

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

The platformBrowserDynamic function initializes the Angular platform for use in a web browser and is imported from the @angular/platform-browser-dynamic module. Angular has been designed to run in a range of different environments, and calling the platformBrowserDynamic function is the first step in starting an application in a browser. The next step is to call the bootstrapModule method, which accepts
the Angular root module for the application, which is AppModule by default and which is imported from the app.module.ts file in the src/app folder and described in the next section. The bootstrapModule method provides Angular with the entry point into the application and represents the bridge between the functionality provided by the @angular modules and the custom code and content in the project. The final
part of this statement uses the catch keyword to handle any bootstrapping errors by writing them to the browser’s JavaScript console.

Understanding the Root Angular Module

The term module does double duty in an Angular application and refers to both a JavaScript module and an Angular module. JavaScript modules are used to track dependencies in the application and ensure that the browser receives only the code it requires. Angular modules are used to configure a part of the Angular application

Every application has a root Angular module, which is responsible for describing the application to Angular. The root module is called AppModule, and it is defined in the app.module.ts file in the src/app folder; it contains the following code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

The AppModule class doesn’t define any members, but it provides Angular with essential information through the configuration properties of its @NgModule decorator, but the one that is of interest now is the bootstrap
property, which tells Angular that it should load a component called AppComponent as part of the application startup process. Components are the main building block in Angular applications, and the content provided by the component called AppComponent will be displayed to the user.

Neeraj Dana

Experienced Software Engineer with a demonstrated history of working in the information technology and services industry. Skilled in Angular, React, React-Native, Vue js, Machine Learning