Make writing a habit together! This is the 15th day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details

This article is a translation, using free translation.

Have you ever wondered what happens behind the scenes of Angular apps?

You want to know how Angular apps start? This article is worth your reading.

Angular apps are launched from angular.json files. This is not the entry file for the application, but the startup file for the application.

Where is the app entry?

If you use an older version of Angular, such as version 4 or 5, you will notice that the angular.json file is not there. Instead, the angular-cli.json file is. Don’t worry, they all say the same thing, just different names.

Angular. json contains all configuration information for the application. Angular Builder uses this file to find the entry to the application.

Let’s take a look at what an angular.json file contains. Here’s an 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"]}}Copy the code

Angular. json is like human DNA. In the file above we know what UI framework was used, what Builder was used to build the application, index page path, polyfills path, etc.

👀Note: I always look at angular.json and package.json files before starting a new Angular application. I’ll use these two files to get the initial information about the application. Sometimes, you’ll find strange things in your application (e.g., multiple UI frameworks applied), and maybe you should clean up some of the dirt.

The entry point for the application is “main”: “SRC /main.ts”. If you generate using angular-CLI, your main.ts will look like this:

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));
Copy the code

As you can see, the job of this file is to create a browser environment for the application. The application boots with bootstrapModule.

The entry has been determined, and that’s What bootstrapping is (What’s bootstrapping)

Every app has at least one Angular module. The root root module guides you to start references and is called the boot module.

Thus, Bootstrapping is like a device or a loading technique that launches Angular applications. When we load a component or module, it will be rendered.

Now we have the application portal. The Builder does its job by executing the following command, main.ts.

platformBrowserDynamic().bootstrapModule(AppModule)
Copy the code

As you may have noticed, the above method also passes the AppModule argument. Real application code! Yes, it contains all the application code. The AppModule contains declarations, components, services, and other app-related code.

Here is a typical AppModule file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [].entryComponents: [].bootstrap: [AppComponent]
})
export class AppModule {}Copy the code

In the AppModule, in the @NgModule decorator, we have a bootstrap array indicating that the AppComponent is loaded.

The application has been opened, so how to write the content inside.

Here is the app.component.ts file:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root'.templateUrl: './app.component.html'.styleUrls: ['./app.component.css']})export class AppComponent {
  title = 'angular';
}
Copy the code

Each component declares three properties:

  1. Selector — used to access the component
  2. Template/TemplateURL— Contains componentsHTML
  3. Stylesurls – Contains a specific style of the shuffled

Angular then calls the index.html file.

By the way: Angular is a framework that allows us to create single-page applications. Index.html is the mount page provided by the server.

The index.html file ultimately calls the root component, app-root, which is defined in the file app.component.ts. The following index.html file.

<! doctypehtml>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <! Call the root component -->
  <app-root></app-root>
</body>
</html>
Copy the code

So far, we know how the main page or home page is rendered (which we mentioned above). How are other pages or components rendered?

First, index.html is always rendered. No matter what we do, index.html is the main module. Changes to the contents of the

tag are URL-based. This leads us to app.routing.module.ts. A router-outlet is routed through the app.component.html template file (below). Page components can be mapped to a URL and rendered within the

tag.

<router-outlet></router-outlet>
Copy the code

Here’s an illustration that matches them:

For now, you don’t need to know routing permissions. Not all components require route guards, and it’s good to know that for now.

That’s how Angular apps work. Hopefully you’ve understood.

How does an Angular Application Work?

【 the 】 ✅