Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8

Conclusion

Angular 8 Conclusion

Angular 8 App Loading

How an Angular 8 app loaded and started

When we create an Angular app and run it by using ng serve command, it looks like the below screenshot.

Angular 8 App Loading

It is a simple Angular app created by using ng new app-name command and no editing in the app. The name of the app is angular8app.

Now, we will see how the Angular’s app is loaded and started.

Remove all the code from the app.component.html file and write some necessary HTML code. 

For example:

<h5>This is my first angular application, and I
am in app.component.html (TutorialandExample)</h5>

This is the default code in the app.component.html file.

When

Angular 8 App Loading

When we update it by the given code:

Angular 8 app load 2

We can see it on the browser.

First angular app

Here, the file is not served by the server. The server served an index.html file.

creating first angular 8 apps

Angular is a framework which allows creating "single-page applications," and here the index.html is a single page which was produced by the server line.

Index.html:

<!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Angular8firstapp</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 above code look like a normal HTML code and here the <title> tag shows the same title in the browser as the app's title. But the <body> code is different from normal HTML code.

We can see "<app-root>” tag which is provided by the CLI. We can say that, whenever we create a project from the CLI, by default, one component is created, i.e., "app component".

See the “app.component.ts” file. It is a Typescript file. Here, we see the “selector” property.

import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 }) 
 export class AppComponent {
   title = 'angular8firstapp';
 } 
Creating Angular 8 APP 2

We can see that the selector property contains the string as index.html file. This information is required the Angular to place this part into an index.html file with the template of a component.

The template of the component is "./app.component.html," so, Angular includes this part into the index.html file.

Now, we see how an “app-root” is included in index.html file.

How does angular triggers?

When ng-serve builds the application, it creates “bundles" and automatically adds these to index.html file at runtime. So, from these bundles, the first code has to be executed from "main.ts," i.e., "main.ts” file is the main file from where the execution of an angular application starts.

main.ts file:

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)); 
angular

Here, the bootstrap method starts the Angular application. It refers to AppModule, which looks in the app folders. We can see in the “app.module” file that bootstrap array which is basically a list of all the components analyses the index.html file.

app.module.ts file:

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

Now, we can see that the angular application gets loaded as;

main.ts  >>   app.Module.ts  >> app.component.ts  >>  index.html >>  app.component.html