What Is Architecture Overview of Angular?

Angular is a platform and framework for building client applications in HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.

With the help of the above architecture overview, you can identify the seven main building blocks of an Angular Application.

1.      Component

2.      Templates

3.      Metadata

4.      Data Binding

5.      Directives

6.      Services

7.      Dependency Injection

The basic building blocks of an Angular application is NgModules, which provide a compilation context for components.

The angular app is defined by a set of NgModules and it always has at least a root module that enables bootstrapping, and many more feature modules.

1.      Components define Template views

2.      Components use services

The Angular Module (NgModules) helps us to organize an application into connected blocks of functionality.

The NgModule properties for the minimum “AppModule” generated by the CLI which are followed as -

ü  Declarations — Use to declare the application components.

ü  Imports —Every application must import BrowserModule to run the app in a browser.

ü  Providers — There are none to start.

ü  Bootstrap — This is a root AppComponent that Angular creates and inserts into the index.html host web page.

app.module.ts -

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

import { NgModule } from '@angular/core';

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

import { LoginComponent } from './login/login.component';

import { SignupComponent } from './signup/signup.component';

@NgModule({

  declarations: [

    AppComponent,

    LoginComponent,

    SignupComponent

  ],

  imports: [

    BrowserModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

By default Bootstrap file is created in the folder “src/main.ts” and “main.ts” file is very stable. Once you have set it up, you may never change it again and it looks like -

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

I hope you are enjoying this post! Please share with your friends. Thank you!!