How Does an Angular Application Work?

How Does an Angular Application Work?

Have you been curious about what happens behind the scenes of an Angular app?

Do you wonder how an Angular application starts? Do you wonder about what happens behind the scenes? Dear reader, this article is for you!

The story starts from a file. Oh yeah, every angular application starts thanks to the angular.json. It’s not the application's entry door, but an Angular app starts thanks to this configuration file.

What’s the entry point?

If you are using an old version of Angular such as Angular 4 or 5, you’ll notice that you don’t have this file. Instead, you have angular-cli.json. No worries, it the same file! It just got renamed in the recent versions of Angular.

The angular.json contains all the configurations of the app. The Angular builder will look at this file to find the entry door of the application. Good, we found the entry ^^

Now, let’s dive in and see what this file contains. Here is an example of an angular.json example:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/angular-starter",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "aot": false,
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
      "src/style.css"
    ]
  }
}

programming angular javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.

How to Build an Angular Application with Angular CLI

How to set up the Angular CLI and generate a Trivial App

Learning JavaScript: Data Types and Variables

To paraphrase the title of an old computer science textbook, “Algorithms + Data = Programs.” The first step in learning a programming language such as JavaScript is to learn what types of data the language can work with. The second step is to learn how to store that data in variables. In this article I’ll discuss the different types of data you can work with in a JavaScript program and how to create and use variables to store and manipulate that data.