June 14, 2024

How Angular Application works?

Now, let us explore the project. What is the significance of each folder, files.

If you follow the previous article on how to create an angular application, then open the project folder, you will see these files and folders. I have highlighted few folders, files

Note: I have used Visual Studio Code IDE. This is open source software. However, you are free to use any other IDE. If you are using Visual Studio Code, then select File-> Open Folder Select your angular project. In my case, I have selected my-first-app folder.

The package.json file defines what libraries will be installed into node_modules folder when you run npm install.
dependencies section: You can see all the dependencies of the project. This is essential to running the applications.
devDependencies section: Only necessary to develop applications

# Content of package.json
  "dependencies": {
    "@angular/animations": "^15.1.0",
    "@angular/common": "^15.1.0",
    "@angular/compiler": "^15.1.0",
    "@angular/core": "^15.1.0",
    "@angular/forms": "^15.1.0",
    "@angular/platform-browser": "^15.1.0",
    "@angular/platform-browser-dynamic": "^15.1.0",
    "@angular/router": "^15.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.1.5",
    "@angular/cli": "~15.1.5",
    "@angular/compiler-cli": "^15.1.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",

This is the folder, where all the dependencies which is mentioned in the package.json file actually were installed.

src folder:
This folder has all the source files for the root-level application project.

Behind the scene

Are you curious to know, how our angular application runs? Here, we go
You ran the application by the command ng serve
To run the application, angular checks the file: angular.json Closely observe these 2 lines.
“index”: “src/index.html”,
“main”: “src/main.ts”,
main.ts is the main file that Angular reads and executes its content

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

import { AppModule } from './app/app.module';

  .catch(err => console.error(err));

Line no.5 bootstraps(I mean starts) our angular application by passing AppModule to the method.
Line no.3 AppModule refers to the typescript file app.module.ts which is present under app folder.
from ‘./app/app.module‘; here no need to add the extension .ts at the end. By default angular adds the extension.

Now check the file app.module.ts file present under src/app folder

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

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

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Line no.14 basically lists all the components which should be known to Angular at the point of time it analyzes our index.html file.
Line no. 4 refers to the app.component.ts file. Now angular analyzes the component: AppComponent. Reads the details present in AppComponent typescript file. Now angular knows the selector app-root.

# Content of app.component.ts file
import { Component } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'my-first-app';

AppComponent has some HTML code, which is mentioned in line no. 6 Then, index.html displays the content of AppComponent by mentioning the selector <app-root></app-root>

# Content of index.html file
<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

Leave a Reply

Your email address will not be published. Required fields are marked *